首页 > 其他分享 >antd的a-table选中复选框后,删除操作还仍然存在选中项的问题暴力解决法

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

时间:2023-07-28 17:14:43浏览次数:26  
标签:清空 复选框 选中 vue3 antd table

在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

相关文章

  • react antd5 分页英文,设置中文
    使用ConfigProvider包裹住英文组件,或者包裹根目录import{ConfigProvider}from'antd';importzhCNfrom'antd/locale/zh_CN';<ConfigProviderlocale={zhCN}><Paginationtotal={85}showSizeChangershowQuickJumpershowTotal=......
  • AntDB用户手册——登录数据库之adb登录
    快速部署单机版安装安装RPM包将交付人员提供的RPM包上传到服务器上,然后在root或者具有sudo权限的用户下安装。安装到默认路径/opt/app/antdb:sudorpm-ivhantdb-xxx.rpm如果想安装到其他路径,可以通过如下方式:sudorpm-ivhantdb-xxx.rpm--relocate=/opt/app/antdb=$ADBHOME$ADB......
  • blender快速选中线面的方法
    1、编辑模式,选中线模式,键盘按住ALT键,鼠标左键点击线,可以实现连续线的选择。 2、同样选择面模式,按住键盘alt键,然后鼠标左键选择面,可以实现连续面的选择 ......
  • antd 改变导航菜单的样式
    //设置菜单样式.ant-menu,.ant-menu-sub,.ant-menu-inline{color:var(--white);background-color:${bgColor}!important;}//设置子菜单展开样式.ant-menu-submenu>.ant-menu{color:var(--white);background-color:${bgColor}!important;}.ant-menu......
  • react antd5 Warning: Each child in a list should have a unique "key" prop.
    Warning:Eachchildinalistshouldhaveaunique"key"prop.说明:表格数据赋值给一个key值<Tablecolumns={columns}dataSource={data.map((item)=>({...item,key:item.id}))}/>......
  • AntDB快速入门——环境注意项之关闭numa的步骤
    grubby--update-kernel=ALL--args="numa=offtransparent_hugepage=never"grub2-mkconfigsystemctlstoptunedsystemctldisabletuned#重启后,验证grub的cmdline:#在输出的行里面有这个内容:numa=offtransparent_hugepage=never即为正确cat/proc/cmdline#检查......
  • Qt QTreeView实现三态复选框
    //参考:https://dgrt.cn/a/1328707.html?action=onClickvoidQtWidgetsApplication1::initTreeView(){ ui.treeView->setEditTriggers(QTreeView::NoEditTriggers); //自定义右键菜单 this->setContextMenuPolicy(Qt::CustomContextMenu); //最喜欢用的model,不喜欢自己写model......
  • 前端-antd table 分页器自定义
      按照时间排序, ......
  • antd 组件 select input cheeckboxGround 传参 自定义传参
    tempfunclog:......
  • antd 合并表格的最后一列,且增加点击事件
    实现:antd(版本1.7.8)+vue实现如下,点击导出导出该表格为excel table的columns里最后一列的操作这样写:在customRender里写合并最后一列的方法:判断index等于0,也就是第一行,进行行的合并,并且返回这一行的内容,是一个导出的链接,方法是exprotInterfaceData别的行返回的rowSpan是0......