elmentUI的input组件一些坑点

官网文档：http://element.eleme.io/#/zh-CN/component/input
1、on-icon-click属性中的值必须是不带（）

<el-input type='text' icon='search' :on-icon-click='sech()' v-model='state'></el-input>sech(){console.log(this.state)}这种写法input相当于input的onchange事件，而不是官方推荐的点击图标触发的事件,每次文本框发生变化都会输出state的值改善：:on-icon-click='sech()'，只有点击图标才会输出，

2、我们最常用的还是文本框加下拉列表提示
这里我们可以选用el-autocomplete组件；官方文档属性如下

---

参数 说明 类型 可选值 默认值

---

placeholder 输入框占位文本 string — —
disabled 禁用 boolean — false
props 配置选项，具体见下表 object — —
value 必填值输入绑定值 string — —
custom-item
通过该参数指定自定义 string — —
的输入建议列表项的组件名
fetch-suggestions
返回输入建议的方法，仅当
你的输入建议数据 resolve
时，通过调用 callback(data:[]) 来返回它
Function(queryString, callback) — —
popper-class
Autocomplete 下拉列 string — —
表的类名
trigger-on-focus
是否在输入框 focus 时 boolean — true
显示建议列表
on-icon-click 点击图标的回调函数 function — —
icon 输入框尾部图标 string — —

demo代码<template>  <div>    <el-input placeholder="请选择日期" icon="search" v-model="input2" @click="handleIconClick"></el-input>    <el-input placeholder="请输入网址">      <div slot="prepend">http://</div>      <i slot="append" class="el-icon-edit"></i>    </el-input>    <el-autocomplete      v-model="ss"      :trigger-on-focus = 'false'      :fetch-suggestions="search"      icon="search"      @select="sl()"      :on-icon-click="cl"    ></el-autocomplete>  </div></template><script>  export default {    data() {      return {        ss:'',        result:[{'value':'南京1'},{'value':'上海2'},{'value':'北京3'},{'value':'合肥4'}],        input2:''      };    },    methods: {      handleIconClick(){        //console.log(this.input2);      },      sl(){      //选中下拉列表的处理函数        console.log(this.ss);        console.log(1)      },      cl(){      //点击icon图标的处理函数，实际中我们的调用搜索接口，获取数据等等        console.log(this.ss);        console.log(2)      },      search(a, cb) {        var result = this.result;       // var results = [{'value':'上海2'}]       var results = a ? result.filter(this.createFilter(a)) : result;        // 调用 callback 返回建议列表的数据        //我们也可以判断条件直接赋值cb的处理参数        cb(results);      },      createFilter(a) {        return (result) => {    //这里有一个坑，你如果更改value属性名称代码不报错，结果将无法筛选，永远为空，尝试了多次没有成功，用原生处理筛选，直接赋值cb的参数都不行，一定要属性值为value          return (result.value.indexOf(a) != -1);        };      },    },    mounted() {    }  }</script>