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>