【Vue入门实践2】不调后端接口==＞单纯前端实现添加和删除功能==＞【数组操作】数组的遍历、差集、过滤、切割、添加、删除操作

小白Rachel

已于 2022-03-02 13:50:02 修改

阅读量2.4k

点赞数

分类专栏：前端工作日记随笔 Vue项目实战文章标签：前端 vue.js javascript 数组

于 2022-02-28 17:39:10 首次发布

本文链接：https://blog.csdn.net/sabrina_cc/article/details/123185903

版权

如果你觉得生活对你做了恶作剧，也许这是让你停下来反省自己的最好时机。

假添加删除摘要

1.前端假添加

// 绑定资源提交2-前端实现假添加- 添加资源账户到tab列表
    addToList() {
      // 把选中数据添加到已绑定账号后面
      console.log(this.resourcePzTableData, "添加前数据");
      // 两个数组去重-补集
      let diff = this.addItem.filter(
        (item) => !this.resourcePzTableData.some((val) => item.id === val.id)
      );
      console.log(diff, "diff");
      // 是否有重复项-消息提示
      if (diff.length !== this.addItem.length) {
        this.$message.warning("有重复选择项，已过滤。");
      }
      // 找到数组差集添加到原有数组
      this.resourcePzTableData = this.resourcePzTableData.concat(diff);
      // 返回上级页面并刷新数据
      this.pageindex = 2;
      this.page = 0;
      // 隐藏侧边栏资源分组树
      this.$store.state.treeShow = false;
    },

step1：拿到选中的添加资源数组addItem。使用filter过滤函数。计算addItem和resourcePzTableData的补集diff

addItem = [1,2,3,4]
resourcePzTableData = [3,4,6,7,8,9]
diff = [1,2]

step2: 将数组差集diff，使用concat方法，添加到原有数组后面

step3: 返回上级页面、显示列表

2.前端假删除

 handleResourcePzDelete(row) {
      const resourcePzIds = row.id == undefined ? this.ids : [row.id];
      // debugger;
      const ids = row.id != undefined ? [row.id] : this.ids;
      const vm = this;
      this.$modal
        .confirm("是否确认删除？")
        .then(function () {
          // return deleteData({ ids: stuffPzIds });
          console.log("删除前", vm.resourcePzTableData);
          for (var value of ids) {
            vm.resourcePzTableData.splice(
              vm.resourcePzTableData.findIndex((item) => item.id == value),
              1
            );
          }
          console.log("删除后", vm.resourcePzTableData);
        })
        .then(() => {
          this.getResourcePzList();
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },

step1: 根据复选框找到需要删除的id

step2: 使用splice切割数组，删除掉使用findIndex找到的资源行

看懂了就不用看下面的详细功能讲解了。

假添加删除摘要速览