ElementUI table表格多选的回显加分页切换

1、需求：

		1.一个带选择框的具有分页功能的表格
		2.根据后端返回的数据回显已勾选的数据
		3.已勾选的数据不会因为分页而丢失
		4.收集勾选中的数据向后端发送请求

2、效果展示

3、html代码部分

    <el-table
      :data="tableData"
      ref="product"
      style="width: 100%"
      stripe
      :header-cell-style="headClass"
      :cell-style="rowClass"
      v-loading="tableLoading"
      :row-key="getId"
      @select="handleSelectionChange"
      @select-all="handleAllChange"
    >
      <el-table-column
        type="selection"
        width="52"
        :reserve-selection="true"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="用户姓名"
        min-width="14%"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="street"
        label="所属街道"
        min-width="14%"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="community"
        label="所属社区"
        min-width="14%"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="mobile"
        label="联系电话"
        min-width="14%"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column prop="status" label="用户状态" min-width="14%">
        <template v-slot="{ row }">
          <div v-if="row.status == 1">启用</div>
          <div v-else>禁用</div>
        </template>
      </el-table-column>
    </el-table>
    //这是封装的分页器
        <div class="pagination-box">
      <Paging
        :initTotal="total"
        @sizeChange="handleSizeChange"
        @pageChange="handleCurrentChange"
      ></Paging>
    </div>

在el-table标签上添加:row-key属性
	 :row-key="getId"这是唯一标识符的作用
el-table-column  type="selection"上添加 :reserve-selection="true" 
	:reserve-selection="true"：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function（elementUI的解释）。

4、script代码部分

<script>
import userAPI from "@/api/other_user/user.api.js";//这是引入的接口
import Paging from "@/components/Paging";//引入封装的分页器
export default {
  components: { Paging },
  data() {
    return {
      tableLoading: false,
      total: 0,
      currentUserId: 0,
      parentId: 0,
      tableData: [],//后端返回的表格数据
      echoList: [], // 收集回显用的数组
      selectUserIds: [],//收集到的数据用于向后端发送请求
      queryParam: {//分页请求参数
        pageNumber: 1,
        pageSize: 10,
      },
    };
  },

  methods: {
    // 打开弹窗
    openDialog(row) {
      this.currentUserId = row.id;
      this.linkVisible = true;
      // 获取已选中的用户
      this.pageByGridAssociated();
      // 获取全部分页数据
      this.Page();
    },
    //渲染列表
    Page() {
      userAPI.pageByGrid(this.queryParam).then(async (res) => {
      //获取表格数据
        this.tableData = await res.list;
        this.total = res.total;
        this.$nextTick(() => {//这里用来做回显
          this.tableData.forEach((i) => {
            if (this.echoList.includes(i.id)) {//判断请求到的表格数据中有没选中的数据
              // 如果有需要回显选中的数据就去做选中处理
              this.$refs.product.toggleRowSelection(i, true);
            }
          });
        });
      });
    },
    // 回显选中数据
    pageByGridAssociated() {
    //发送请求获取需要回显的数据
      userAPI.pageByGridAssociated({ id: this.currentUserId }).then((res) => {
        // 获取需要回显的数据的id组
        this.echoList = res.list.map((item) => item.id);
        //这里解释一下为什么收集需回显数据到发送请求的数组中去（用户可能会什么都没选就跑去向后端发送请求，如果这里不收集就会出现展示的是有选中的数据，发送请求的时候没数据的尴尬局面）
        this.selectUserIds = this.echoList;
      });
    },
    //这里是做单项选择与单项反选的 选择：打勾或取消
    handleSelectionChange(selected, row) {
      if (!this.echoList.includes(row.id)) {
        // 回显数据里没有本条，把这条加进来(选中)
        this.echoList.push(row.id);
      } else {
        // 回显数据里有本条，把这条删除(取消选中)
        this.echoList.forEach((id, index) => {
          if (id === row.id) {
            this.echoList.splice(index, 1);
          }
        });
      }
      // 这里用于收集发请求需要的数据数组
      this.selectUserIds = this.echoList;
    },
    // 全选、取消全选（原理同上面的单选）
    handleAllChange(selected) {
      if (selected.length > 0) {
        selected.forEach((item) => {
          if (!this.echoList.includes(item.id)) {
            this.echoList.push(item.id);
          }
        });
      } else {
        this.tableData.forEach((item) => {
          this.echoList.forEach((id, index) => {
            if (id === item.id) {
              this.echoList.splice(index, 1);
            }
          });
        });
      }
      // 这里用于收集发请求需要的数据数组
      this.selectUserIds = this.echoList;
    },
    //这里是返回的唯一标识
    getId(row) {
      return row.id;
    },
    // 关闭弹窗
    closeDialog() {
      this.queryParam = {
        pageNumber: 1,
        pageSize: 10,
      };
      // 清空未保存的勾选、取消状态
      this.$refs.product.clearSelection();
      this.linkVisible = false;
    },
    // 点击dialog右上角关闭图标或者点击ESC按键，隐藏dialog框时触发。
    handleClose(down) {
      this.$refs.product.clearSelection();
      down();
    },
    // 提交数据
    submit() {
      let param = {
        dataSource: process.env.VUE_APP_DATA_SOURCE_HCS,
        currentUserId: this.currentUserId,
        selectUserIds: this.selectUserIds,
      };
      userAPI.userRoleBind(param).then((res) => {
        this.$message.success("操作成功");
        this.closeDialog();
      });
    },
    // 查询条数
    handleSizeChange(page) {
      this.queryParam.pageNumber = 1;
      this.queryParam.pageSize = page.pageSize;
      this.Page();
    },
    // 查询页数
    handleCurrentChange(page) {
      this.queryParam.pageNumber = page.pageNumber;
      this.Page();
    },
    //表头样式设置
    headClass() {
      return "background: #DFECFF;font-size:.175rem;font-weight:600;color:#333;";
    },
    //表格样式设置
    rowClass() {
      return "font-size: .175rem;color: #333333;";
    },
  },
};
</script>

5.题外话

单项勾选以及取消勾选：
单项勾选操作方法：
handleSelectionChange，当点击checkbox时，循环判断echoList中是否有当前行信息，
若是没有，则说明是选中状态，push进echoList中；
若是存在当前行信息，则说明是取消勾选，则将echoList中当前行id删除。

全选以及取消全选：
handleAllChange，全选方法有一个参数selecteds，这是一个选中项数组，记录了有多少条选中项；
当进行全选操作时，判断selecteds数组的length，若length>0，
循环selecteds判断echoList数组中是否与selecteds中id匹配，
若不匹配，则表示新增选中项，循环判断是为了去除重复项

关于只在第一页操作选中与取消勾选，
而第二页有默认选中的数据，
提交数据的时候会不会只提交当前页面的数据而丢失其他数据的问题，
经过测试目前是不存在的，当然是不排除其他特殊情况的（目前没发现）