el-cascader的多选-删除和添加（el-cascader 多选）

业务后台使用的gin-vue-admin，教师需要关联多个科目，参考用户角色那里做了一版，发现了一个bug。数据处理不完全，api里采用全删后重新添加，但是数据表里删除不完全。我也懒得去修正bug了，估计新版本的已经处理掉了。

后台用户角色管理：

<template #default="scope">
  <el-cascader
v-model="scope.row.authorityIds"
:options="authOptions"
:show-all-levels="false"
collapse-tags
:props="{ multiple:true,checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:true}"
:clearable="false"
@visible-change="(flag)=>{changeAuthority(scope.row,flag)}"
@remove-tag="()=>{changeAuthority(scope.row,false)}"
/>
 </template>
<script>
const changeAuthority = async(row, flag) => {
  if (flag) {
    return
  }

  await nextTick()
  const res = await setUserAuthorities({
    ID: row.ID,
    authorityIds: row.authorityIds
  })
  if (res.code === 0) {
    ElMessage({ type: 'success', message: '角色设置成功' })
  }
}
</script>

说下自己用到的方案:

1. 接口查询 使用的preload,会把教师关联的科目id记录带过来，在table row处理为数组subjectIds 和subjectIdsOrigin
2. changeTutorSubjects方法处理差集来收集要删除的id和新增的id，再提交后台

<template #default="scope">
  <el-cascader
v-model="scope.row.subjectIds"
:options="subjectsOptions"
:show-all-levels="false"
:props="{ multiple:true,checkStrictly: true,label:'title',value:'ID',disabled:'disabled',emitPath:false}"
:clearable="false"

@change="changeTutorSubjects(scope.row)"
/>
  </template>

<script>

//取交集
const getArrayIntersection = (arr1, arr2) => {
    return arr1.filter(item => arr2.includes(item))
}
const getArrayDiff = (arr1, arr2) => {
    return arr1.filter(item => !arr2.includes(item)) 
}
const changeTutorSubjects = async(row) => {
    
    console.log(row.subjectIds, "asdfasdf", row.subjectIdsOrigin, row.subjectIdsOrigin.length)
    if(row.subjectIds.length < 1) {
        ElMessage({ type: 'warning', message: '至少选择一个学科' })
        return
    }
    let subjectIdsAdd = []
    let subjectIdsDel = []
    
    if(row.subjectIdsOrigin.length > 0) {
        console.log(subjectIdsAdd, "asdfasdf1")
        let interArr = getArrayIntersection(row.subjectIds, row.subjectIdsOrigin)
        console.log(interArr)
        if(interArr.length == 0) {
            subjectIdsAdd = row.subjectIds 
            subjectIdsDel = row.subjectIdsOrigin 
        } else {
            // 取interArr 和subjectIds 差集获取新增的
            subjectIdsAdd = getArrayDiff(row.subjectIds, interArr)
            // 取interArr subjectIdsOrigin 差集获取删除的 
            subjectIdsDel = getArrayDiff(row.subjectIdsOrigin, interArr)
        }
    } else {
        subjectIdsAdd = row.subjectIds 
    }
    
    await nextTick()
    
    const res = await createLzTutorSubjects({
        teacherId: row.ID,
        subjectIdsAdd: subjectIdsAdd,//要增加的
        subjectIdsDel: subjectIdsDel,//要删除的
    })

    if (res.code === 0) {
        row.subjectIdsOrigin = row.subjectIds
        ElMessage({ type: 'success', message: '设置成功' })
    }
}  
</script>