vue使用之搜索下拉选择框内容需要获取

自己使用记录，有问题欢迎探讨。

适用于搜索栏的下拉选择框不是从字典取，而是通过后台从数据库中的某个表取值。

目前只是能够实现，具体意义还不太懂，以后会了随时补充。

1.搜索栏处代码

 <el-form-item label="工种" prop="gzId">
        <el-select v-model="queryParams.gzId"
                   @change="changeGzs" clearable
                   filterable
                   :filterMethod="gzFilter"
                   placeholder="请选择工种">
          <el-option
            v-for="item in gzsFilter"
            :key="item.gzId"
            :label="item.gzName"
            :value="item.gzId"
          ></el-option>
        </el-select>
      </el-form-item>

2.changeGzs 方法

changeGzs(data){
          this.queryParams.gzId=data;
        },

3.gzFilter 过滤器
    gzFilter(val) {
      this.gzQuery = val;
      if (val) { //val存在
        this.gzsFilter = this.gzs.filter((item) => {
          if (!!~item.gzName.indexOf(val) || !!~item.gzName.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        })
      } else { //val为空时，还原数组
        this.gzsFilter = this.gzs;
      }
    },

4. /** 选择工种 下拉框*/
    getGzList() {
      listGz().then(response => {
        this.gzs = response.rows;
        this.gzsFilter = response.rows;
      });
    },

5.return中声明

 gzsFilter:[],

6.create中声明

 this.getGzList();