当前位置：首页 > news >正文

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

news 来源：原创 2025/5/14 21:10:20

这里以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>