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>

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

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam8 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8508 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的10 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀10 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce12 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript