el-autocomplete 中select和fetch-suggestion 获取自定义传参和内部参数

前言

商城项目要设计一个规格组组合的功能，需要实现一个可提示的输入框以供选择，这时候我想到了element-ui的el-autocomplete ，具体UI如下

官方API

select	点击选中建议项时触发	选中建议项
fetch-suggestions	返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它	Function(queryString, callback)

解决方案

从上述API可得知

选中时会触发select的回调方法

feth-suggestions 可用来进行筛选，而因为我这涉及到的是一个table，里面可能会涉及到多组筛选数据，此时我想要不直接把筛选数据扔到该行数据下面，可是这时候遇到了一个问题 feth-suggestions如何获取到当前行数据

• 选中规格参数，触发select方法，给后续的规格值的建议数组赋值
• 点击建议输入框，触发fetch-suggestions 方法，此时将当前好的建议数组通过传参方式传入

select的传参方式

html代码：

<el-autocomplete v-model="scope.row.specName" :fetch-suggestions="searchSpecName"
	placeholder="请输入内容" @select="selectSpecName($event,scope.row)">
</el-autocomplete>

js逻辑

  selectSpecName(e, row) {
  	console.log(e,row)
    // 此处给row.specOptionArr 赋值
  },

fetch-suggestions 传参方式

html代码

<el-autocomplete v-if="scope.row.visible" v-model="scope.row.optionName"
  :fetch-suggestions="((queryString,cb)=>{searchOptionName(queryString,cb,scope.row)})"
    placeholder="请输入内容"">
 </el-autocomplete>

js逻辑

  searchOptionName(queryString, cb, row) {
        var restaurants = row.specOptionArr;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        cb(results);
  },

	createFilter(queryString) {
        return (restaurant) => {
          return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1
          );
        };
      },