vue elementUi input

vue elementUI中input输入框实现搜索

这个方法是适用于后端已经处理好数据并且放到了一个对象里，结构如下，属性名一定要是value,不是value就出错

1.首先在template

<el-form-item label="用户名称" prop="jobName">  
    <el-autocomplete
      class="inline-input"
      v-model="form.value"
      :fetch-suggestions="querySearch"
      placeholder="请输入用户名称"
      :trigger-on-focus="false"
      @select="handleSelect"
    ></el-autocomplete>
</el-form-item>

2.把点击输入框调用的接口直接放到mounted里，记得在data里写上workerL:[]来接收数据,

mounted() {
    getContractWorker().then(response => {
      this.workerL=response.data 
    })
  },
methods(){
	querySearch(queryString, cb) {
		var restaurants = this.workerL;
		var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
		// 调用 callback 返回建议列表的数据
		cb(results);
	 },
	createFilter(queryString) {
	     return (workerL) => {
	        return (workerL.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
	      };
    },
	 handleSelect(item){
	      this.form.wid=item.id
	      this.form.value=item.value
	  },
}