下拉框回显值无匹配项处理

一样平常新增时候，下拉数据有对应的name和value匹配数据
但是比及编辑大概检察时候，恰好选择的那项下拉数据没了
导致回显只能表现id
例如下拉值是选项传递key是3，msg是项3，那么回显时候就会有问题
利用disabled处理回显

1.     <el-select v-model="num" placeholder="请选择">
2.       <el-option v-for="item in list" :key="item" :value="item.value" :label="item.name" />
3.       <!-- 解决找不到对应id但是需要正确回显 需要将下拉值设置为不可选取 -->
4.       <el-option v-if="!filters(num, list)" :disabled="true" :key="num" :value="num" :label="msg" />
5.     </el-select>
8. let num = ref(3)
9.   let msg = ref('项3')
10.   let list =ref(
11.     [
12.     {name:'项1', value: 1},
13.     {name:'项2', value: 2},
14.     // {name:'项3', value: 3},
15.     ]
16.   )
19. // 过滤筛选
20. const filters = (key, arr = []) => {
21.   const names = []
22.   const value = Array.isArray(key) ? key : [key]
24.   for (let i = 0; i < arr.length; i++) {
25.     if (value.includes(arr[i].value)) {
26.       names.push(arr[i].name)
27.     }
28.   }
29.   return names.join(',')
30. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。