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>

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

相关推荐
Amy.Wang1 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景3 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼4 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再8 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55512 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
FogLetter20 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
拾光拾趣录23 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
木头没有瓜2 小时前
vscode离线安装插件
ide·vue.js·vscode
浪裡遊2 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
夏梦春蝉4 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6