14.el-table多选、分页问题

场景：

el-table实现多选、分页，选中项展示在右侧列表（右侧列表有清空、删除每项功能）
（tip：全选的按钮只是针对当前页的，假设第二页选中一项，只有第二页的全选按钮是半选状态的。第一页全选是未选中的，这里并未处理）

问题：

• 每次切换分页，多选回调函数selection-change会置空选中列表【这里可以看下源码】
• 使用select函数，当用户手动勾选数据行的 Checkbox 时触发的事件，切换分页不会触发
• 使用select-all函数，当用户手动勾选全选 Checkbox 时触发的事件（针对当前页的全选）

思路：

1. 右侧checkedList选中里列表，清空、删除每项功能直接操作checkedList
2. 初次渲染，每次table数据变化（切换顶部tab、切换分页），根据checkedList去勾选当前table对应数据（回显逻辑）
3. 当手动勾选、取消数据时，使用官网select函数，参数1：当前选中数组，参数2：勾选、取消当前row数据。根据row判断当前选中数组中，如果包含row，说明勾选了，push到checkedList。反之移除checkedList中的row
4. 手动全选、反选，利用select-all函数，参数：选中当前页面的数据。判断选中当前页面选中数据，但是checkedList不包含，就是push到checkedList。当前页面没有选中，但checkedList包含，移除checkedList对应数据

代码片段

// select
const selectChange = (selectedRows: any, row: any) => {
  // console.log('select', selectedRows, row, selectedRows.indexOf(row))
  let selected = selectedRows.length && selectedRows.indexOf(row) !== -1
  if (selected) {
    addItem(row)
  } else {
    deleteItem(row?.id)
  }
}


// 全选事件
const selectAllChange = (selectedRows: any) => {
  // console.log('全选事件', selectedRows)
  let selectedMarkList = checkedList.map((item: any) => item.id)
  
  // 当前页选中行的标记列表
  let pageSelectedMarkList = Array.isArray(selectedRows)
    ? selectedRows.map((item) => item?.id)
    : []

  tableData.value.forEach((row: any) => {
    if (pageSelectedMarkList.includes(row?.id)) {
      if (!selectedMarkList.includes(row?.id)) {
        addItem(row)
      }
    } else if (selectedMarkList.includes(row?.id)) {
      deleteItem(row?.id)
    }
  })
}