項目要求根據(jù)名稱和編號兩個條件進行搜索:
image.png
原本想用filter-method進行自定義修改, 但是會有一個bug, 就是搜索時輸入數(shù)字的時候會綁定不成功, 輸入框自動清空, 然后有方案就是說根據(jù)輸入框的值賦值給下拉選擇的值,
https://www.freesion.com/article/8643641389/
但是我這個需求是多個下拉選擇的, 不能使用這個方法, 否則就是每個個體都要分別綁定對應(yīng)的數(shù)組, 所以就直接使用最簡單的方法, 就是修改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];
}
