element-ui 中 el-select选择两个条件搜索

项目要求根据名称和编号两个条件进行搜索:

image.png

原本想用filter-method进行自定义修改, 但是会有一个bug, 就是搜索时输入数字的时候会绑定不成功, 输入框自动清空, 然后有方案就是说根据输入框的值赋值给下拉选择的值,
https://www.freesion.com/article/8643641389/

但是我这个需求是多个下拉选择的, 不能使用这个方法, 否则就是每个个体都要分别绑定对应的数组, 所以就直接使用最简单的方法, 就是修改label的值, label的值直接是两个搜索条件的字符串合在一起.

<el-select
                v-model="scope.row.equipmentName"
                :disabled="showCheck2"
                placeholder="请选择"
                clearable
                filterable
                @change="(value) => changeEquip(value, scope.row)"
                :filter-method="dataFilter"
              >
                <el-option
                  v-for="(item, index) in equipList"
                  :key="item.value"
                  :label="item.name"
                  :value="index"
                  :disabled="item.disabled"
                  
                >
                  <span style="float: left">{{ item.equipmentName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.equipmentNum
                  }}</span>
                </el-option>
              </el-select>
            </template>

methods:{
...
 equipRes.data.records.map((eItem) => {
      // 搜索名称和编号
        eItem.name = eItem.equipmentName + ' - '+ eItem.equipmentNum
        eItem.disabled = eItem.location != "丽芳仓库" ? true : false;
      });
      this.equipList = [...equipRes.data.records];
}