vue+element UI之批量删除分页数据

项目场景：vue+element UI之批量删除分页数据

前段时间做一个自动化测试项目，根据业务需求，为满足用户方便快捷的批量删除和执行分页数据，element默认是只保留当前选项，点击第2页，第一页勾选的记录就会消失，于是乎，我们就来解决这个问题-----如何批量删除/执行分页数据？

用过element表格的都知道，有一个多选Checkbox样式，要实现本功能，必须用到 :row-key=“getRowKeys”+ :reserve-selection="true"来配合实现，具体如何用呢？
1）在 <el-table标签中添加 :row-key="getRowKeys"属性 <el-table-column 标签中添加 :reserve-selection="true"属性

    <el-table
          ref="multipleSelectable"
          :data="scriptsList"
          :row-key="getRowKeys" 
          style="width: 100%; border: 1rem solid rgba(228, 228, 228, 0.5)"
          border
          v-show="activeIndex == '1'"
          :header-cell-style="getHeaderRowStyle"
          :cell-style="getRowStyle"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            min-width="3%"
            :reserve-selection="true"
          >
          </el-table-column>

注意：其中 ref=“multipleSelectable” 属性是用于后续删除或执行完毕后清空勾选项,:reserve-selection="true"的意思就是点击下一页继续保留当前页勾选项
2）接下来在methods中处理 :row-key绑定的方法getRowKeys

 getRowKeys(row) {
      return row.ldId;
    },

写到这里，批量删除和执行功能已大致完善，但发现删除/执行成功之后，勾选项还继续保留，此时，应该将勾选项全部清空，就要用到刚刚绑定的ref来解决
3）在批量删除和执行时，发起ajax请求，处理完数据之后，用 this.$refs.multipleSelectable.clearSelection()清空勾选项，具体操作如下：
批量执行：

 batchGotoAction() {
      if (this.loading.length != 0) {
        this.$message.warning("请等待上条脚本执行完毕");
      } else {
        this.$confirm("确定批量运行?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          if (this.multipleSelection.length == 0) {
            this.$message.warning("请勾选用例再进行操作");
          } else {
            this.flag = 1;
            //批量运行传送的数据
            var fkLdIds = [];
            var fkPlIds = [];
            this.multipleSelection.map((obj) => {
              this.loading.push(obj.ldId);
              fkLdIds.push(obj.ldId);
              fkPlIds.push(obj.fkPlId);
            });
            axios
              .post(`${Config.API_ROOT}/CarriedOut/multipleExecution`, {
                ldIds: fkLdIds,
                plIds: fkPlIds,
              })
              .then((response) => {
                this.$refs.multipleSelectable.clearSelection();
                this.loading = [];
                this.flag = 0;
                // this.getScript();
                window.location.reload();
              })
              .catch((error) => {
                this.flag = 0;
                this.loading = [];
                this.$refs.multipleSelection.clearSelection();
              });
          }
        });
      }
    }

批量执行方法一模一样

补充，很多时候需要分页，序号连续上一页
解决方法：在序号列添加 :index="indexMethod"
        <el-table-column
            type="index"
            :index="indexMethod"
            label="序号"
            min-width="4%"
          ></el-table-column>

在methods处理该方法

 indexMethod(index) {
      let curpage = this.pageIndex; //单前页码，具体看组件取值
      let limitpage = this.pageSize; //每页条数，具体是组件取值
      return index + 1 + (curpage - 1) * limitpage;
    },

好啦，下次分享