vue3.2+ts+element-plus 实现多选删除

需求

在element-plus表格中实现多选删除

分析

将所选的数据从表格显示数据删除，本质上是两个数组的差集。在这里使用es6方法

代码

<script lang="ts" stup>
const tableData = reactive<any>({
      list: [],   //表格展示数据
      list2:[]    //多选获得数据
})

//多选数据赋值
const handleSelectChange1 = (val:TPurchaseGetParam[]) =>{
    tableData.list2 = val
}


// 方法一  includes
const handleDelete = () =>{
    tableData.list = tableData.list.filter((item:TPurchaseGetParam[]) =>
      !tableData.list2.includes(item)
    )
}
// 方法二   some
const handleDelete = () =>{
    tableData.list = tableData.list.filter((item:TPurchaseGetParam[]) =>
      !tableData.list2.some(item2 =>item2.id === item.id)
    )
}
// 其他方法 也可以使用forEach等循环进行循环嵌套判断。


</script>