el-table分页时多选数据的保存和回显

大致思路：

把所有选择的数据全部存到一个大数组中，切页的时候匹配原数据利用ref节点的.toggleRowSelection方法进行回显

具体步骤：

1、勾选和全选时需要判断是选中还是取消，然后更新大数组数据。

2、分页获取新数据之后匹配当前页应该选中的数据，使用 multipleTableRef.value!.toggleRowSelection(row, true);进行回显

所有代码：（示例为前端分页）

html

javascript 复制代码

<template>
  <div style="padding: 20px">
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      @select-all="selectAllChange"
      @select="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="username" label="用户名" show-overflow-tooltip />
      <el-table-column prop="firstName" label="姓名" show-overflow-tooltip />
      <el-table-column prop="email" label="邮箱" show-overflow-tooltip />
    </el-table>
    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total,  prev, pager, next,sizes, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-button type="primary" @click="yesTo">确 定</el-button>
  </div>
</template>

javascript 复制代码

<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { setUsers } from "../../utils/api";

let listAll: any = []; // 存起来选中的数据
let multipleSelection: any = []; // 当前页选中的数据
const multipleTableRef = ref(); // 表格ref

let tableData = ref<any>([]); // 表格数据
let allList = reactive<any>([]);
//分页器
const pagination = reactive<any>({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

// 前端分页-切割数据
const paging = () => {
  // 起始位置 = (当前页 - 1) x 每页的大小
  const start = (pagination.pageNum - 1) * pagination.pageSize;
  // 结束位置 = 当前页 x 每页的大小
  const end = pagination.pageNum * pagination.pageSize;
  tableData.value = allList.slice(start, end);
};

// 获取列表数据
const getList = async () => {
  // 接口请求
  allList = [
    {id:1, username: "admin1", firstName: "管理员", email: "123456@163.com" },
    {id:2, username: "admin2", firstName: "管理员", email: "123456@163.com" },
    {id:3, username: "admin3", firstName: "管理员", email: "123456@163.com" },
    {id:4, username: "admin4", firstName: "管理员", email: "123456@163.com" },
    {id:5, username: "admin5", firstName: "管理员", email: "123456@163.com" },
    {id:6, username: "admin6", firstName: "管理员", email: "123456@163.com" },
    {id:7, username: "admin7", firstName: "管理员", email: "123456@163.com" },
    {id:8, username: "admin8", firstName: "管理员", email: "123456@163.com" },
    {id:9, username: "admin9", firstName: "管理员", email: "123456@163.com" },
    {id:10, username: "admin10", firstName: "管理员", email: "123456@163.com" },
    {id:11, username: "admin11", firstName: "管理员", email: "123456@163.com" },
    {id:12, username: "admin12", firstName: "管理员", email: "123456@163.com" },
    {id:13, username: "admin13", firstName: "管理员", email: "123456@163.com" },
    {id:14, username: "admin14", firstName: "管理员", email: "123456@163.com" },
    {id:15, username: "admin15", firstName: "管理员", email: "123456@163.com" },
    {id:16, username: "admin16", firstName: "管理员", email: "123456@163.com" },
    {id:17, username: "admin17", firstName: "管理员", email: "123456@163.com" },
    {id:18, username: "admin18", firstName: "管理员", email: "123456@163.com" },
  ];
  pagination.total = allList.length;
  paging(); 
  toggleSelection(getTurn()); // 回显勾选
};
getList();


// 确认导入
const yesTo = async () => {
  if (listAll.length) {
    listAll = deduplicate(listAll, "username"); //去重
    await setUsers(listAll);
    ElMessage.success("导入成功");
    getList();
  } else {
    ElMessage.warning("请先选择用户！");
  }
};

// 匹配获取当前页应该选中的数据
const getTurn = () => {
  let list: any = [];
  listAll.forEach((v: any) => {
    tableData.value.forEach((s: any) => {
      if (v.username == s.username) list.push(s);
    });
  });
  return list;
};
// 勾选时
const handleSelectionChange = (val: any, item: any) => {
  multipleSelection = val;
  listAll.push(...multipleSelection);
  if (val.includes(item)) {
    //勾选时做的事
  } else {
    //取消勾选时做的事，
    listAll.forEach((v: any, i: number) => {
      if (v.username == item.username) {
        listAll.splice(i, 1);
      }
    });
  }
};
// 全选
const selectAllChange = (val: any) => {
  if (val.length) {
    multipleSelection = JSON.parse(JSON.stringify(val));
    listAll.push(...val);
  } else {
    multipleSelection.forEach((v: any) => {
      listAll.forEach((s: any, i: number) => {
        if (v.username == s.username) {
          listAll.splice(i, 1);
        }
      });
    });
    multipleSelection = [];
  }
};
// 当前页之前勾选过的数据 - 回显
const toggleSelection = (rows?: any) => {
  nextTick(() => {
    if (rows) {
      rows.forEach((row: any) => {
        multipleTableRef.value!.toggleRowSelection(row, true);
      });
    } else {
      multipleTableRef.value!.clearSelection();
    }
  });
};

// 分页事件
const handleSizeChange = (val: number) => {
  pagination.page = 1;
  pagination.limit = val;
  if (listAll.length) {
    listAll = deduplicate(listAll, "username"); //去重
  }
  getList();
};
const handleCurrentChange = (val: number) => {
  pagination.page = val;
  if (listAll.length) {
    listAll = deduplicate(listAll, "username"); //去重
  }
  getList();
};
//  数组去重方法
const deduplicate = (arr: any, t: any) => {
  const newArr = [arr[0]];
  for (let i = 1; i < arr.length; i++) {
    let repeat = false;
    for (let j = 0; j < newArr.length; j++) {
      if (t && arr[i][t] === newArr[j][t]) {
        repeat = true;
        break;
      }
    }
    if (!repeat) newArr.push(arr[i]);
  }
  return newArr;
};
</script>