element表格跨页全选实现

一.思路

先声明一下，我的这个跨页全选是根据前端静态分页实现的

思路:添加一个全选按钮，全选后，选中所有数据。这里要实现两个操作，一个是element显示选中所有的项（包括分页的），二是将选中的项存储起来，方便发送数据到后端，再次全选后，取消所有选中。然后是实现，点击单条数据，选中状态需要切换。

二.实现具体过程

1.全选按钮功能（需要在element表格勾选所有，难点是分页的要勾上；并用一个数组存储全选数组）

<el-button type="primary" @click="selectAll(tableList)">全选</el-button>

这里的tableList是所有的表格数据，传进去的目的是为了跨页全选钩上，注意element官方文档的toggleAllSelection全选只能选择当前页的全选，要用toggleRowSelection，通过传入所有的表格行数据，遍历勾上。下面的webTableRef是为了操作封装的表格。同时加个selectFlag用来判断选中切换与否。

//存储表格选中的数据
const selectTaskList = ref([])
//是否全选标志，ture为全选中
//定义ref，获取子组件webTable的多选表格数据
const webTableRef = ref()
const selectFlag = ref(false)
const selectAll = (rows) => {
  selectFlag.value = !selectFlag.value
  rows.forEach((row) => {
    webTableRef.value.multipleTableRef.toggleRowSelection(row, true)
  })
  selectTaskList.value = JSON.parse(JSON.stringify(tableList.value))
  // true为选中, 0或false为取消选中
  if (!selectFlag.value) {
    //取消全选
    webTableRef.value.multipleTableRef.clearSelection()
    selectTaskList.value = []
  }
}

2.使用reserve-selection让跨页选中状态保存

先设置rowKey

 <el-table
      @row-click="singleElection"
      :row-key="getRowKeys"
    >

const getRowKeys = (row) => {
  // id 是后台传递的每行信息唯一标识
  return row.id
}

然后配置reserve-selection

<el-table-column :type="selection" :reserve-selection="true" width="55" />

3.点击单项后改变选中状态

通过select方法中的selection判断是否选中（selection为空则取消了选中，row是选中或者选中都返回改行数据值），如果选中则把该行数组push进数组，否则删除。

   <el-table
      @select="judgeSelectTick"
    >

const judgeSelectTick = (selection, row) => {
  // true为选中, 0或false为取消选中
  const selected = selection.length && selection.indexOf(row) !== -1
  if (!selected) {
    const res = selectTaskList.value.findIndex((item) => item.id === row.id)
    selectTaskList.value.splice(res, 1)
  } else {
    selectTaskList.value.push(row)
  }
}

3.操作完成后记得清空存储选中的数组

selectTaskList.value = []

三.补充一些细节

多选框全选按钮隐藏

::v-deep .el-table__header-wrapper .el-checkbox {
  display: none;
}