2021-06-04

vue 实现表格的批量删除

实现思路：
1.获取选中项列表 delList

这里可以使用element 组件轻松获取

2 .将delList从完整的数据列表中过滤出去

   // 批量删除
    deleteSelected() {
      let arr1 = this.tableData;
      let arr2 = this.multipleSelection;
      // [arr1, arr2] = [this.tableData, this.multipleSelection];

      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          this.$message.success("删除成功");

          let arr3 = arr1.filter(
            (x) => !arr2.some((y) => JSON.stringify(x) === JSON.stringify(y))
          );
          this.tableData = arr3;
        })
        .catch(() => {});
    },

扩展：

实现 [{ a: 1}, {b: 2},{c: 3}, {d: 4}]  -   [{ b: 2}, { d: 4}] =  [{ a: 1},{c: 3}]

<script>
        let arr1 = [{ a: 1}, {b: 2},{c: 3}, {d: 4}]
        let arr2 = [{ b: 2}, { d: 4}]
        // console.log('arr1', arr1)
        // console.log('arr2', arr2)
        let arr3 = arr1.filter(
            (x) => !arr2.some((y) => JSON.stringify(x) === JSON.stringify(y))
        );
        console.log(arr3) //[{ a: 1},{c: 3}]
    </script>