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>

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

相关推荐
waylon111131 分钟前
【HOC】高阶组件在Vue老项目中的实战应用 - 模块任意排序
前端·vue.js·面试
DJA_CR2 分钟前
解决在 TSX 中使用 `RouterView` + `KeepAlive` 不生效问题
前端·vue.js
小旋风0123419 分钟前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
旧味清欢|23 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
gongzemin1 小时前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据1 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
三翼鸟数字化技术团队3 小时前
Vue自定义指令最佳实践教程
前端·vue.js