本文已参与「新人创作礼」活动，一起开启掘金创作之路。

假添加删除摘要

1.前端假添加

    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.前端假删除

      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找到的资源行

看懂了就不用看下面的详细功能讲解了。一、前端页面以及功能概述 1.资源配置页（1）【列表】页面加载已经绑定的资源列表

（2）【添加资源】点击按钮跳转到添加资源页面

（3）【添加资源组】点击按钮跳转到添加资源组页面

（4）【删除】点击按钮删除列表中的一行数据！！前端列表操作删除，不调接口

（5）【保存】点击保存按钮，向后端发送请求，传递资源id数组，实现绑定

2.添加资源页

（1）【查询重置】正常的页面查询和列表重置功能，不做赘述

（2）【确定】选择资源行数据后点击‘确定’按钮。系统返回资源配置页，并在资源配置页列表中添加选中的行（前端实现，不涉及后端保存）。如果有重复数据，前端剔除，并提示。

3.添加资源组页

（1）【选择资源分组】在左侧资源分组树中选择资源分组

（2）【确定】点击后，请求后端接口，返回数据，同添加资源，在此不做赘述

二、前端假添加功能实现

1.前端页面布局

（1）资源配置页

table涉及的数组为 resourcePzTableData

    <!-- 资源配置页 -->
    <div v-show="pageindex == 2" style="min-height: 500px">
        <div class="tableHeaderWrap">
            <!-- 按钮部分 -->
            <!-- 按钮部分 -->
        </div>
        <el-row style="padding: 30px 30px 0px 25px;">
             <!-- 表格部分 -->
            <el-table
              :data="resourcePzTableData"
              fit
              border
              stripe
              @selection-change="handleSelectionChange"
            >
              ....
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    :style="'padding:none'"
                    @click="handleResourcePzDelete(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div>
              <el-button type="primary" size="mini" @click="resourceAddSubmit"
                >保 存</el-button>
            </div>
        </el-row>
    </div>
</el-tab-pane>

activeName: "first",
pageindex: 2, // 控制显示哪个页面
//资源配置
resourcePzTableData: [
        {
          id: "1",
          name: "运维资源假数据",
        },
        {
          id: "2",
          name: "运维资源假数据2",
        },
      ],
resourcePageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
},
radio: 1,
resourceList: [], //资源列表

（2）添加资源页

添加资源页的数组为resourceList

    <!-- 资源配置页 -->
       <!--上部分代码 -->
    <!-- 添加资源页 -->
    <el-form :model="queryParams" ref="queryForm" label-width="auto">
        <!--查询表单 -->
    </el-form>
    <el-table
        :data="resourceList"
          fit
         border
         stripe
         @selection-change="handleSelectionChange1"
         >
        .....
     </el-table>
     <el-button type="primary" size="mini" @click="addToList">确 定</el-button>
</el-tab-pane>

2.获取已绑定资源列表和全部资源列表

（1）资源配置页----已绑定资源列表

    getResourcePzList() {
      getPzBingdingList({ resourceConfigId: this.pzId }).then((res) => {
        this.resourcePzTableData = res.data.list;
      });
    },

（2）添加资源页-----全部资源列表

    resourceAdd() {
      // this.resourceDialog = true;
      this.page = 1;
      this.pageindex = 0;
      this.$store.commit("treeVis");
      // 调接口显示可以绑定的资源
      this.getAllResourceList();
    },
// 已有全部资源列表
    getAllResourceList() {
      const params = {
        ...this.queryParams,
      };
      debugger;
      allResourceList(params).then((res) => {
        console.log(res);
        this.resourceList = res.data.list;
        this.total = res.data.totalCount;
      });
    },

3.前端假添加/删除操作

选中【添加资源页resourceList中的数据行】-------点击确定------添加到【资源配置页resourcePzTableData表后面】

（1）多选框选中数据

addItem;[], // 多选框选中的item
 
// 多选框选中需要添加的数据
    handleSelectionChange1(selection) {
      this.addids = selection.map((item) => item.id);
      this.addItem = selection.map((item) => item);
      // this.addsingle = selection.length != 1;  // 是否单选
      // this.addmultiple = !selection.length;  // 是否多选
    },

（2）假添加实现

比较已绑定资源列表，剔除重复数据

    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;
    },