在antd的a-table中有复选框,选中后进行操作,比如删除,刷新后竟然还存在选中了的情况,这显然不合理,选中的参数是否清空或者拿到的就是选中的参数,都需要查看一边,查了一堆解决办法,试了一下,不行,不知道是不是vue3的情况就不行。
网络中的方案大多都是:
<a-table
bordered
:dataSource="props.roleDatas.list"
:columns="tableColumns"
:rowSelection="rowSelection"
:scroll="{ x: 800, y: 490 }"
@change="onChangeTable"
:pagination="false"
/ >
const rowSelection = {
selectedRowKeys, // 都说清空这里就行,试了一下选择有问题,没尝试了,有空的人可以继续试试vue3这里的处理方式
onChange: (selectedRowKeys, selectedRows) => {
},
};
看到的都是react或者vue2的此处处理,不知道vue3是否有效,试了一下没成功,最后只好自己暴力解决了。
我的思路就是table这一类的渲染问题,实质上选中的数据已经清空,那么只需要重新渲染这个表格就好了,
重新渲染最简单的就是加个key值,改变key值就行了,所以
<a-table
:key="'key'+keyNum"
bordered
:dataSource="props.roleDatas.list"
:columns="tableColumns"
:rowSelection="rowSelection"
:scroll="{ x: 800, y: 490 }"
@change="onChangeTable"
:pagination="false"
/ >
let keyNum =ref(0)
删除成功写上 keyNum.value++
成功。
有弄出的的小伙伴记得留言。
标签:清空,复选框,选中,vue3,antd,table
From: https://www.cnblogs.com/cn-oldboy/p/17588337.html