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

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

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

相关推荐
艾小逗38 分钟前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
明似水4 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
HhhDreamof_5 小时前
云贝餐饮 最新 V3 独立连锁版 全开源 多端源码 VUE 可二开
前端·vue.js·开源
Simaoya5 小时前
【vue】【element-plus】 el-date-picker使用cell-class-name进行标记,type=year不生效解决方法
前端·javascript·vue.js
Dnn015 小时前
vue3+element-push 实现input框粘贴图片或文本,图片上传。
前端·javascript·vue.js
Nuyoah.6 小时前
《Vue3学习手记5》
前端·javascript·学习
曹牧6 小时前
Java 调用webservice接口输出xml自动转义
java·开发语言·javascript
天天扭码6 小时前
2025年了,npm 与 pnpm我们该如何选择
前端·javascript·npm
烛阴6 小时前
10个JavaScript编程技巧,助你成为高效开发高手!
前端·javascript