Antd 表格复选框点击外边缘和点击行事件重叠

ATWLee

已于 2022-12-17 22:25:46 修改

阅读量459

点赞数

分类专栏： Ant Design 文章标签：前端 css antd

于 2022-12-17 22:19:49 首次发布

本文链接：https://blog.csdn.net/BWater_monster/article/details/128357834

版权

Ant Design 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

博客讲述了在使用Ant Design的Table组件进行多选操作时遇到的问题，即点击复选框外边缘无法正确选中行。问题源于复选框外的label元素有额外的高度。解决方案是通过CSS覆盖样式，将label高度调整并移除after伪元素，从而修复点击行为的冲突。

摘要由CSDN通过智能技术生成

场景描述

使用antd的Table表格组件
可选择的多选模式下，点击复选框实现选中，点击行也选中
出现的问题：点击复选框外边缘导致这一条内容未能选中

原因分析：

审查元素发现复选框（input标签）外层还有6px的高度（label标签）。见下图，截图来自antd官网的示例。⬇️
在这里插入图片描述

这种情况导致了点这6px的位置，相当于既点击了复选框，又点击了整行。就出现了未选中的bug（点击了复选框选中，再点击了整行取消选中）

解决方案：

label是22px的原因是有一个after伪元素
在这里插入图片描述
通过样式覆盖把外层的label高度调成16即可，再调整一下位置。

我为了方便，把after删了，不知道这里的after有啥用，没看到啥作用。

.ant-table-tbody {
  // 多选表格的checkbox的样式覆盖(input 是16*16，但是外边的label是16*22，就导致了有6px的点击事件会执行两次，一次复选框的回调，一次行的回调，因此这里把那6px的高度给去掉）
  tr .ant-table-selection-column {
    label.ant-checkbox-wrapper {
      margin-top: 6px;
      &::after {
        display: none;
      }
      span.ant-checkbox {
        top: 0;
      }
    }
  }
}