多選下拉框：解決下拉框遠(yuǎn)程查詢回顯展示不正確的問題
<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的對應(yīng)行數(shù)據(jù)row
const { names, codes } = data
// 解決遠(yuǎn)程展示value不是label的問題
names.map((item, index) => {
// 獲取到對應(yīng)的refs元素，然后往其中的cachedOptions去push對象，將需要回顯對應(yīng)的label與value值存入
this.$refs.testCode.cachedOptions.push({
currentLabel: item,
currentValue: codes[index],
label: item,
value: codes[index]
})
})
單選下拉框：解決下拉框遠(yuǎn)程查詢回顯展示不正確的問題
<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>
// 用戶點(diǎn)擊編輯彈出對話框后仁烹，遠(yuǎn)程回顯
this.$refs.staffCode.cachedOptions.push({
currentLabel: staffName,
currentValue: staffCode,
label: staffName,
value: staffCode
})
// 遠(yuǎn)程調(diào)用方法
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 = []
}
},
