下拉框回显值无匹配项处理
一样平常新增时候,下拉数据有对应的name和value匹配数据但是比及编辑大概检察时候,恰好选择的那项下拉数据没了
导致回显只能表现id
例如下拉值是选项传递key是3,msg是项3,那么回显时候就会有问题
利用disabled处理回显
https://i-blog.csdnimg.cn/direct/cc1893649b9049bcbe59abb9c9012ac2.png
<el-select v-model="num" placeholder="请选择">
<el-option v-for="item in list" :key="item" :value="item.value" :label="item.name" />
<!-- 解决找不到对应id但是需要正确回显 需要将下拉值设置为不可选取 -->
<el-option v-if="!filters(num, list)" :disabled="true" :key="num" :value="num" :label="msg" />
</el-select>
let num = ref(3)
let msg = ref('项3')
let list =ref(
[
{name:'项1', value: 1},
{name:'项2', value: 2},
// {name:'项3', value: 3},
]
)
// 过滤筛选
const filters = (key, arr = []) => {
const names = []
const value = Array.isArray(key) ? key :
for (let i = 0; i < arr.length; i++) {
if (value.includes(arr.value)) {
names.push(arr.name)
}
}
return names.join(',')
}
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页:
[1]