vue+elementui で js の 2 つの異なる配列を比較し、異なる項目を見つけて新しい配列に入れます。

前景:
プロジェクトでは、2 つの異なる配列を比較する必要があり、異なる項目が新しい配列に配置されます。

例:
各ユーザーは独立したアカウントを持っています。
プロジェクトで遭遇: 前提として、ユーザーは以前に手動で選択されており、この操作ユーザーのユーザー名のアクセス許可はバックグラウンドで手動で取り消されており、実際に Dragon Beard Noodle のユーザー アイテムを送信できます。(ただし、この Longxumian ユーザーは、実際のドロップダウン ボックス リストには表示されません。選択した項目には、以前に選択された Longxumian ユーザーが含まれます)。

例:
(動的に返されるリスト)
配列: ドロップダウン ボックスで選択された項目のリスト

let a=ref([
{userName:'黄金糕',userId:'1'},
{userName:'双皮奶',userId:'2'},
{userName:'蚵仔煎',userId:'3'},
{userName:'龙须面',userId:'4'},
]）

(動的に返されるリスト)
b 配列: ドロップダウン ボックスに選択された項目があるかどうかに関係なく、表示されます (ドロップダウン ボックス内のすべての項目)

let b=ref([
{nickName:'黄金糕',userId:'1'},
{nickName:'北京烤鸭',userId:'5'},
])

let editOptions=ref([]);//新数组

html

//弹出框的新增和修改公用一个下拉列表项
//其他代码段省略..
//重要部分
//keyIds:【1，2，3，4】选中项返回的数组list
//v-show="!item.tag"  控制当前项不为真就不显示下拉列表项当前name
<el-form>
<el-form-item label="名称: " prop="keyIds">
  <el-select v-model="form.coop" multiple  placeholder="请选择">
  //editOptions是组成的新数组
    <el-option
      v-for="item in editOptions"
      :key="item.userId"
      :label="item.nickName"
      :value="item.userId" v-show="!item.tag">
      <span>{
   
   { item.nickName }}</span>
     </el-option>
   </el-select>
  </el-form-item>
  </el-form>

js

//data.a 是后台返回的数组 list
//data.a为空的时候是null 
//所以用三元运算符解决
  data.a ? true : data.a = []
      let arr = []
      let idList = []
      b.value.forEach(i => {
        idList.push(i.userId)
      })
      data.a.forEach(item => {
        if (idList.indexOf(item.userId) === -1) {
          arr.push({
            nickName: item.userName,
            userId: item.userId,
            tag: true
          })
        }
      })
      nextTick(() => {
      //editOptions 组成一个新数组 
        editOptions.value = [...b.value, ...arr]
        console.log('修改名称',editOptions.value);
      })