element表格跨页全选实现(二)之后端分页

一.实现思路与效果图

1.大体思路

1. 因为如果数据量过大，无法获取所有的数据，所以需要一个标志告诉后端有没有全选

2. 然后要考虑一种情况，就是全选后，用户再次勾选取消单个选中的数据，用另外一个数组存储这个勾选的数组。

3. 后端接口拿到两个数据，一个是全选标志，一个是钩子取消的数组数据，通过全部数据减去钩子的数据就是选中的数据。

4. 如果没有全选，则是选择单个的，用一个数组存储选中的数据即可

2.ui思路

• 一个全选按钮，控制是否全选
• 难点：跨页实现全选。这里因为是后端分页，所以只能ui全选当前页，我这里是通过点击分页切换时再全选下一页。这个时候会存在一个问题就是：如果点击下一页默认全选，然后用户再次点击取消钩子，由于是默认全选了，所以会把取消的也选上。
• 解决钩子取消选中再次勾上的问题，拿当前页数组和储存取消钩子的数组做差集，获得当前页没有被勾选取消的数组，然后钩上即可

关键思路就是，传一个全选标志和一个全选后取消选中的数组，后端根据全选标志判断是否全选，是全选则用所有数据减去取消选中的数据得到真正的数据。

效果图：

二.具体实现

1定义一个全选标志和全选方法

//是否全选标志，ture为全选中
const selectFlag = ref(false)
const selectAll = (rows) => {
  selectFlag.value = !selectFlag.value
  rows.forEach((row) => {
    webTableRef.value.multipleTableRef.toggleRowSelection(row, true)
  })
  if (!selectFlag.value) {
    //取消全选
    webTableRef.value.multipleTableRef.clearSelection()
  }
}

2.点击分页按钮时，通过全选标志判断是否需要ui显示全选当前页，同时过滤掉选中取消的数据

//存储表格未选中的数据
const noSelectTaskList = ref([])
const changePageSize = async (val) => {
  //新建一个新数组，和当前页数据数组求差集，过滤掉用户全选后然后取消勾选的数组
  //switchUserList是当前页的数据
  //.every是为了求差集
  const newArr = switchUserList.value.filter((v) => {
    return noSelectTaskList.value.every((e) => e.id != v.id)
  })
  if (selectFlag.value === true) {
    newArr.forEach((row) => {
webTableRef.value.multipleTableRef.toggleRowSelection(row, true)
    })
  }
}

3.使用element的 @select="judgeSelectTick"绑定选中钩子时触发的事件，如果是选中勾上则noSelectTaskList.value.push该条数组；

取消勾中则splice删除该条数据

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

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

selection方法，selection返回的是选中所有数组，一个都不选中则返回空。row则是勾中或者不勾中都返回该行数据。

如下：

三.结合业务理解

结合业务理解，我这里的业务是可以全选分配任务，也可以选单个分配，所以还会有一个selectTaskList，控制是否选中单个数据。也就是说这里的表格包含两个功能：一个是全选（需要全选标志selectFlag和取消勾选数组noSelectTaskList），一个是可以单选（存储勾中选中的数组selectTaskList）。