南七星之家 发表于 2025-1-17 09:03:40

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

一样平常新增时候,下拉数据有对应的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]
查看完整版本: 下拉框回显值无匹配项处理