526互联

antd的a-table选中复选框后，删除操作还仍然存在选中项的问题暴力解决法

发布时间 2023-07-28 17:03:27作者: 风意不止
在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++ 
成功。
有弄出的的小伙伴记得留言。