element plus 表格 table分页状态或者条件类型切换下实现勾选记录

实现这种切换的时候勾选的复选框状态保持，如果是分页其实实现思路也一样。

实现思路：有一个缓存，存储的是选中的行，当勾选行的时候就往缓存里边去添加，取消勾选的时候就从缓存里边移出，切换的时候用维护的缓存去勾选上即可，获取数据的时候直接返回这个维护的缓存即可，不用管他是第几页或者什么条件下的数据。

处理行的选择事件

使用select事件：当用户手动勾选数据行的 Checkbox 时触发的事件

怎么知道是勾选还是取消勾选呢？其实很简单，当前选中的这行包含在选中里边就说明当前这行是选中嘛，否者就是没有选中的状态。

const selectRow = (selection: any, row: any) => {
    console.log(selection)
    console.log(row)
    // true就是选中，0或者false是取消选中。
    // 当前选中的这行包含在选中里边就说明当前这行是选中嘛，否者就是没有选中的状态
    let selected = selection.length && selection.indexOf(row) !== -1
    console.log(selected)
}

根据是否选择的状态处理向缓存中添加或者移除

const selectRow = (selection: any, row: any) => {
    // true就是选中，0或者false是取消选中。当前选中的这行包含在选中里边就说明当前这行是选中嘛，否者就是没有选中的状态
    let selected = selection.length && selection.indexOf(row) !== -1
    if (selected === true) {
        console.log("选中状态应该添加到记录中", row)
        let findrow = state.checkDataRecord.find(a => a.id === row.id)
        // 排除一下记录中已经有了的数据。我这里切换的时候可能会有重复的数据
        if (!findrow) {
            state.checkDataRecord.push(row)
        }
    }
    else {
        // console.log("取消选中状态应该从记录中移除", row)
        // 这里移除的方式使用过滤的方式。也可以找到索引后使用.splice(rowIndex, 1)移除
        state.checkDataRecord = state.checkDataRecord.filter((a: any) => a.id !== row.id)
    }
    // console.log("目前记录的内容", state.checkDataRecord)
}

处理勾选状态

在分页或者切换数据后，勾选已经勾选上的数据,很简单用官网文档的方法toggleRowSelection去选择即可。但是注意几点：

1：调用时机，要放到先数据库回来的后面且加上nextTick,不然可能会因为时机不对，而无法勾选上已经记录的数据。

2：勾选以前选择的时候不能直接把记录的值用于去勾选是有问题的，要从现有这一页绑定的数据库中去筛选出来需要勾选的值。估计虽然数据值是一样的，但是对象不一样，也就是内存中存储的地址是不一样的。

nextTick(() => {
    // 勾选上目前已经选择上的数据，估计要放到数据查询接口回来的时候在勾上,且要写到nextTick里边去，不然页面还没有渲染
    state.checkDataRecord.forEach((row: any) => {
        console.log("记录里边有数据自动勾上", row)
        // 勾选以前选择的时候不能直接把以前记录的值用于去勾选是有问题的，要从现有这一页绑定的数据库中去筛选出来需要勾选的值，
        // 在显示上去。或者给表格设置一下row-key，这样勾选的时候应该就不需要指定整个对象了，只需要给我们规定的key就行，这个需要自己的尝试了
        let findrow = state.tasksList.find((a: any) => a.id === row.id)
        if (findrow) {
            taskTableDataRef.value!.toggleRowSelection(findrow, undefined)
        }
    })
})

就这样其实已经能实现在勾选后，切换回来勾选状态也是保持的，也能正确的获取到所有勾选的数据。但是还差全选与全反选的处理，顶部的全选与全反选是不会触发select事件的，我们需要单独处理一下。

单独处理一下全选与全反选的状态记录

使用select-all事件：当用户手动勾选全选 Checkbox 时触发的事件

怎么知道是全选还是全不选呢？其实非常的简单，看参数里边有没有值即可，有值就是勾选的全选，没值就是勾选的全不选。

const selectAllRow = (selection: any)=>{
    console.log("手动点击了全选")
    console.log(selection)
    if(selection.length>0)
    {
        console.log("全选")
    }
    else
    {
        console.log("全反选")
    }
}

加入处理代码：

const selectAllRow = (selection: any) => {
    // console.log("手动点击了全选")
    // console.log(selection)
    if (selection.length > 0) {
        console.log("全选")
        // 往维护的数据里边去添加
        selection.forEach((element: any) => {
            let findrow = state.checkDataRecord.find(a => a.id === element.id)
            // 排除一下记录中已经有了的数据
            if (!findrow) {
                state.checkDataRecord.push(element)
            }
        });
    }
    else {
        console.log("全反选")
        // 从当前这一页的数据在缓存数据中去掉
        state.tasksList.forEach((element: any) => {
            let rowIndex = state.checkDataRecord.findIndex(a => a.id === element.id)
            // console.log("找到的位置", rowIndex)
            // 排除一下记录中已经有了的数据
            if (rowIndex > -1) {
                state.checkDataRecord.splice(rowIndex, 1)
            }
        });
    }
}