vue+element表格 ＜el-select＞远程搜索

为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.value。

 <el-table-column
                  prop="leftKey"
                  align="center"
                  label="农药登记证号"
                  filterable
                  width="145"
                >
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.pdNo"
                      filterable
                      remote
                      clearable
                      :disabled="true"
                      reserve-keyword
                      placeholder="登记证号"
                      :remote-method="remoteMethod"
                      :loading="remoteLoading"
                    >
                      <el-option
                        v-for="item in remoteOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>

data部分

  detail: {
        pdNo: '',
      },   
   remoteOptions: [], // 远程农户证号 for循环的返回数据的数组
   remoteLoading: false, // 是否正在从远程获取数据

方法

   remoteMethod (query) {
      try {
        clearTimeout(a)
      } catch (e) {
      }
      var a = setTimeout(() => {
        this.remoteLoading = true
        //获取农药证号数据
        if (query.length > 3) {
          this.$http({
            url: '/pesticide/register/registNoLike',
            method: 'get',
            params: {
              noLike: query
            }
          }).then(({ data }) => {
            if (data && data.code === 0) {
             
              this.remoteOptions = data.data.map(item => {
                return { value: `${item}`, label: `${item}` };
              });
              this.remoteLoading = false          
            }
          })
        }
        else {
          this.remoteLoading = false
          this.remoteOptions = [{
            label: "请至少填写四位",
            value: ""
          }];
        }
      }, 300);

    },

再举一个例子，在a框中，远程搜索后得到数据后，把a和b框到数据绑定在一起。

                  <el-table-column
                  prop="leftKey"
                  align="center"
                  label="农药通用名"
                  width="145"
                >
                  <template slot-scope="scope">
                    <el-select
                      :disabled="disabled"
                      v-model="scope.row.commonName"
                      filterable
                      remote
                      reserve-keyword
                      placeholder="农药通用名"
                      :remote-method="remoteMethodName"
                      :loading="nameLoading"
                      value-key="pdNo"
                      @change="
                        (val) => {
                          commonSelectChange(val, scope.$index)
                        }
                      "
                    >
                      <el-option
                        v-for="item in nameOptions"
                        :key="item.pdNo"
                        :label="item.commonName"
                        :value="item"
                      >
                        <!--:value="item" 绑定整条数据item-->
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>

data中

  detail: {
        pdNo: '',
        commonName: ''
      },
  remoteOptions: [], // 远程农户证号 for循环的返回数据的数组
      remoteLoading: false, // 是否正在从远程获取数据
      nameOptions: [],
      nameLoading: false,

事件

   remoteMethodName (query) {
      try {
        clearTimeout(a)
      } catch (e) {
      }
      var a = setTimeout(() => {
        this.nameLoading = true

        //获取农药证号数据
        if (query.length >= 2) {
          this.$http({
            url: '/pesticide/register/pesNameLike',
            method: 'get',
            params: {
              nameLike: query
            }
          }).then(({ data }) => {

            if (data && data.code === 0) {
              // console.log(data, 4556454);

              // this.list = data.data

              // const nameData = [  // 假数据，让后台返回这种格式
              //   {commonName:'敌敌畏',pdNo:'PD20142222'},
              //   {commonName:'敌敌畏2',pdNo:'PD20142223'},
              // ]
              this.nameOptions = data.data || [];
              this.nameLoading = false
            }
          })
        }
        else {
          this.nameLoading = false
          this.nameOptions = [{
            label: "请至少填写两位",
            value: ""
          }];
        }
      }, 300);

    },

  // 下拉框change事件
    commonSelectChange (value = {}, rowIndex) {
      const { pdNo = '', commonName = '' } = value;
      console.log(value, 5456465);
      this.remoteOptions = [pdNo];   // 给编号的数据赋值
      const details = (this.dataForm.details || []).map((item, index) => {
        // console.log(details, 888888);
        // item, index = Object.assign({}, (item, index));   // 拷贝对象，避免修改数据影响到数据源
        let newItem = JSON.parse(JSON.stringify(item))
        if (rowIndex === index) {  // 如果是当前行
          // if (row.rowIndex === index) {  // 如果是当前行
          item.commonName = commonName;
          item.pdNo = pdNo;  // 给编号下拉框赋值
        }
        return { ...item }
      });
      this.dataForm.details = details;
      console.log(details, 88888);
    },

是