el-select:有关多选，options选项值不包含绑定值的回显问题

这里以element-plus举例：

<el-select v-model="value" multiple placeholder="Select" style="width: 240px"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> //选项值 const options = [ { value: "1", label: "Option1", }, { value: "2", label: "Option2", }, { value: "3", label: "Option3", }, { value: "4", label: "Option4", }, { value: "5", label: "Option5", }, ]; //绑定值 const value = ref(["1", "6", "8"]);

可以看到，我当前的options中并不存在value值为6和8的选项，所以页面就出现了这种场景 ，显然这样是不合适的；

 

解决办法：

合并选项，构建新的选项列表；

假设这是后台给我们返回过来的数组对象，那么我们接下来需要做的操作就是将 resp 与 options进行整合一下；

const getOptions = computed(() => uniqBy([...options, ...resp], "value"));

将options和resp进行合并，后利用lodash-es的uniqBy方法，以value为标准，进行去重；

<el-select v-model="value" multiple placeholder="Select" style="width: 240px" size="large"> <el-option v-for="item in getOptions" :key="item.value" :label="item.label" :value="item.value" /> </el-select>

 

思路就是这个思路，具体实现看各位的业务需求；