antd vue的table换页或者搜索后（改变table数据源），选中的数据中无法记住前一页已勾选的数据

最新推荐文章于 2024-09-27 15:49:03 发布

向前看2568

最新推荐文章于 2024-09-27 15:49:03 发布

阅读量2.2k

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_61175223/article/details/123549323

版权

在使用Ant Design Vue的Table组件时，遇到一个问题：换页或搜索后无法记住之前选中的数据。通过监听`selectedRowKeys`和`onSelect`事件，可以实现保存并恢复多页选中数据的功能。`onSelectChange`用于更新选中key，而`onSelect`用于将选中行数据存入数组。这样，无论换页还是数据变化，都能保持选中数据的完整记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在开发中发现antd vue的table组件换页或搜索以后选中的数据无法记住前一页已勾选的数据
只能记住selectedRowKeys, 但是换页以后selectionRows只有当前页的数据, 现在我需要也有之前勾选的rows数据(即整条数据信息)

<a-table
    :rowSelection="{selectedRowKeys: selectedRowKeys,
    onChange: onSelectChange,
    onSelect: onSelect}"
>

</a-table>

methods: {
    onSelectChange(selectedRowKeys, selectedRows){
        console.log('选中的key值',selectedRowKeys)
        console.log('选中的行数据',selectedRows)
        this.selectedRowKeys = selectedRowKeys
    },
    onSelect(record, selected) {
        //record 返回你选中的行内容; selected 选中时返回true,取消勾选时返回false
        selected?this.addbanklist.push(record):
        this.addbanklist.splice(this.addbanklist.findIndex(x => x.id === record.id),1)
        console.log(this.addbanklist) //你自己赋值的数组
    },
}

这样写后大家就会发现无论是否换页或者改变数据源，你的数组都会是任何时候你所选中的数据了。