项目要求根据名称和编号两个条件进行搜索:
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];
}
