这里以element-plus举例:
TypeScript
<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进行整合一下;

TypeScript
const getOptions = computed(() => uniqBy([...options, ...resp], "value"));
将options和resp进行合并,后利用lodash-es的uniqBy方法,以value为标准,进行去重;
TypeScript
<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>

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