多选下拉框:解决下拉框远程查询回显展示不正确的问题
<el-select style="width: 100%"
ref="testCode"
v-model="dialogFormData.codes"
multiple filterable remote
:remote-method="codesRemoteMethod">
<el-option
v-for="item in codesOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
// data: 从table中传给dialog的对应行数据row
const { names, codes } = data
// 解决远程展示value不是label的问题
names.map((item, index) => {
// 获取到对应的refs元素,然后往其中的cachedOptions去push对象,将需要回显对应的label与value值存入
this.$refs.testCode.cachedOptions.push({
currentLabel: item,
currentValue: codes[index],
label: item,
value: codes[index]
})
})
单选下拉框:解决下拉框远程查询回显展示不正确的问题
<el-select
ref="staffCode"
v-model="dialogFormData.staffCode"
filterable
remote
:remote-method="staffCodeRemoteMethod">
<el-option
v-for="item in staffCodeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
// 用户点击编辑弹出对话框后,远程回显
this.$refs.staffCode.cachedOptions.push({
currentLabel: staffName,
currentValue: staffCode,
label: staffName,
value: staffCode
})
// 远程调用方法
async staffCodeRemoteMethod(value) {
if(value !== '') {
const { result } = await $webApi.staffCodeRemote({ keyWord: value })
this.staffCodeOptions = (result || []).map(({ staffName, staffCode}) => ({
label: staffName,
value: staffCode
}))
} else {
this.staffCodeOptions = []
}
},