el-select多选标签v-model绑定成对象数组且根据value删除

官网只没有明确说如何绑定v-model为对象数组

重点：v-model想绑定成对象数组，重点是属性值必须是[{label:'label1',value:'1'},{label:'label2',value:'2',...}]格式，不可以自定义属性名称

适用场景：el-select点击后不是下拉选择，可能是打开弹窗或者其他+选择的标签显示的名称有重复值

示例：

<el-select
   multiple
   v-model="value1List" //标签显示的内容
   placeholder="请选择"
   @click="openDialog"
   @change="toChange"
  >水果种类
    <el-option
       v-for="item in valueList"
       :key="item.value"
       :label="item.label"
       :value="item.value"
     >
     </el-option>
</el-select>

data:{
  return{
   //原数组
    valueList:[
       {name:"苹果",code:"1"},
       {name:"梨子",code:"2"},
       {name:"香蕉",code:"3"},
       {name:"苹果",code:"4"},
   ]，
   //标签显示的值
   value1List:[],
   //勾选中的项
   selectList:[],
   //最后提交的值
   submit:[],
  }
}

//选好后返回的函数
toChoose(){
    //记录选择的项，删除标签时对比使用
    this.value2List = this.selectList
    this.value1List = this.selectList.map((item) => {
      return {
        label: item.name,
        value: item.code,
      };
    });
    console.log("value1List",this.value1List)
   //value1List [{label:"苹果",value:"1"},{label:"苹果",value:4}]
}

//删除标签时
toChange(){
  this.submit=
  this.value2List.filter((item) => {
     return this.value1List.find((item1) => {
         return item1.value == item.code;
     });
  });
}