el-table跨页保持选中状态全选和非全选前言这个需求是这样的：前端用el-table展示了人员的信息，el-tab

前言

这个需求是这样的：前端用el-table展示了人员的信息，el-table可以进行，行的多选和全选，产品提了这样的需求：当点击了全选之后，需要让表里的所有数据都进行选中状态，也就是需要在点击分页的时候其他分页也保持选中状态，这时候我就在想，后端的数据是分页返回的，只要我点击一次分页就会重新调用接口返回第二页的数据那么我怎么保证每一页都选中呢，el-table默认的全选只是对当前页进行了全选并不满足需求，绞尽脑汁花了不少时间最终也实现了，接下来带大家看看具体实现的流程！！

我的思路

找到选中行状态发生改变时触发的回调函数@select
选中全选状态发生改变时触发的回调函数@select-all
el-table给了一个toggleRowSelection方法来手动设置选中状态

我的代码

el-table需要用到的回调函数

<el-table
  ref="volunteerTableRef"
  :data="volunteerData"
  max-height="270"
  @select="onTableSelect"
  @selection-change="selectionChange"
  @select-all="selectSingleTableAll"
>

先定义好需要用到的数组

const tableAllSelectedId = ref([]); // 未添加-保存表格勾选的全部
const tableAllSelectedRow = ref([]); // 未添加-保存表格勾选的行数
const volunteerData_all = ref([]); // 未添加-所有义工
const volunteerData = ref([]); // 未添加-分页义工

点击表格的勾选触发的事件

// 未添加-点击表格勾选触发事件
function onTableSelect(rows, row) {
  // 判断是点击了表格勾选还是取消勾选
  // true就是选中，0或者false是取消选中
  const selected = rows.length && rows.indexOf(row) !== -1;
  if (!selected) {
    // console.log('取消勾选')
    // 如果点击取消勾选
    const index = tableAllSelectedId.value.indexOf(row.userId);
    tableAllSelectedId.value.splice(index, 1); // 取消勾选，则删除id
    tableAllSelectedRow.value.splice(index, 1); // 取消勾选，则删除数据
  } else {
    // console.log('勾选')
    tableAllSelectedId.value.push(row.userId); // 取消勾选，则删除id
    tableAllSelectedRow.value.push(row); // 取消勾选，则删除数据
  }
}

每一行的状态发生改变无论是全选还是单选都会触发

const selectionChange = (val) => {
  // 将获取到的id存入tableAllSelectedId数组(点击某行前面的勾选、选中某行的勾选、全选。三种状态都能触发此功能)
  val.forEach((item) => {
    if (tableAllSelectedId.value.indexOf(item.userId) === -1) {
      tableAllSelectedId.value.push(item.userId);
      tableAllSelectedRow.value.push(item);
    }
  });
};

点击全选时触发的事件

const selectSingleTableAll = (selection) => {
  // 获取当前页码所显示的数据
  const a = volunteerData.value;
  // 获取当前页勾选的数据
  const b = selection;
  let flag_inCurrentPage;
  selection.forEach((item) => {
    if (item.userId === a[0].userId) {
      flag_inCurrentPage = true;
      return;
    }
  });
  // 后端分页，点击全选框时，当前页的勾选数目等于当前页数据个数，判断为全选
  const flag = a.length === b.length && flag_inCurrentPage;
  if (flag === true) {
    // 切换成了全选状态
    volunteerData_all.value.forEach((item) => {
      if (tableAllSelectedId.value.indexOf(item.userId) === -1) {
        tableAllSelectedId.value.push(item.userId); // 如果点击全选就保存全部的id
        tableAllSelectedRow.value.push(item); // 则保存表格全部的数据
      }
    });
    // console.log('切换成了全选状态', this.tableData_all)
  } else {
    // 切换成了非全选状态
    tableAllSelectedId.value = []; // 如果取消全选，则清空保存的id
    tableAllSelectedRow.value = []; // // 如果取消全选，则清空保存的数据
    // console.log('切换成了非全选状态')
  }
};

总结

以上就是实现这个功能的全部代码啦，最终实现了跨页保留选中的状态并且选中全选可以在切换分页的时候对所有数据进行选中状态，有不懂的小伙伴欢迎一起交流噢！！