实现效果

chrome-capture-2022-5-13 (1).gif

实现思路

设置el-table分页记录
设置el-table的select-all全选和select选择事件逻辑
设置el-pagination的size-change和current-change事件逻辑
设置多选的删除事件逻辑

设置el-table分页记录

el-table设置row-key。el-table-column type="selection"加上reserve-selection属性。即可实现分页记录

设置el-table的select-all全选和select选择事件逻辑

select-all全选事件：我们需要遍历传参selection列表，这里分为两种情况第一种全选，如果全选，就把全选的表格对象添加到multipleSelection多选列表。如果是取消全选则还有两种情况，第一种是其他页有选择的数据在multipleSelection多选列表，另一种是其他页没有选择的数据。两种都需要循环当前页的表格数据将multipleSelection多选列表进行过滤。 select选择事件：我们需要对传参selection列表和选择的值进行判断，如果之前选择就删除multipleSelection多选列表，如果没有则添加进multipleSelection多选列表。

设置el-pagination的size-change和current-change事件逻辑

我们在进行切换页码和当前页个数事件的时候，要重新对选择框的选择状态进行判断。判断重新获取数据的表格有没有选择的数据在multipleSelection多选列表，如果有要讲多选框进行勾选，如果没有则要取消勾选。

设置多选的删除事件逻辑

多选展示的删除事件。将点击的id进行查找删除并且要判断当前表格数据是否有被删除的多选数据。如果有则要讲表格的多选框进行取消勾选。

部分代码实现

script

const handleCurrentChange = (val) => {
      state.currentPage = val
      state.tableData = currentList()
      getToggleRowSelection()
    }

const handleSizeChange = (val) => {
  state.pageSize = val
  state.tableData = currentList()
  getToggleRowSelection()
}

const handleSelectionChange = (selection, row)=>{
  const isCheckEd = selection.some(item => item.id === row.id)
  if(isCheckEd){
    state.multipleSelection.push(row)
  } else {
    state.multipleSelection = state.multipleSelection.filter(item => item.id !== row.id)
  }
}
const handleSelectionChangeAll = (val)=>{
  if(val && val.length > 0){
    val.forEach(itemSelectAll => {
      const isSame = state.multipleSelection.some(item => item.id === itemSelectAll.id)
      if (!isSame) {
        state.multipleSelection.push(itemSelectAll)
      } else {
        state.tableData.forEach(item=>{
          state.multipleSelection = state.multipleSelection.filter(v=>v.id !== item.id)
        })
      }
    })
  } else {
    state.tableData.forEach(item=>{
      state.multipleSelection = state.multipleSelection.filter(v=>v.id !== item.id)
    })
  }
}

const getToggleRowSelection = () => {
  for (let i = 0; i < state.tableData.length; i++) {
    const isSelectBool = state.multipleSelection.filter(item => item.id === state.tableData[i].id)
    if (isSelectBool && isSelectBool.length > 0) {
      ctx.$refs.multipleTableRef.toggleRowSelection(state.tableData[i], true)
    } else {
      ctx.$refs.multipleTableRef.toggleRowSelection(state.tableData[i], false)
    }
  }
}

const handleDeleteMultipleTable = (item) => {
  const index = state.multipleSelection.findIndex(v => v.id === item.id)
  if (index !== -1) {
    for (let i = 0; i < state.tableData.length; i++) {
      if (state.multipleSelection[index].id === state.tableData[i].id) {
        ctx.$refs.multipleTableRef.toggleRowSelection(state.tableData[i], false)
        break
      }
    }
    state.multipleSelection.splice(index, 1)
  }
}

总结

el-table分页记录的实现
vue3的nextTick使用
el-table多选记录的实现

vue3实现elment-plus多选数据控制