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

场景描述

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

---

原因分析：

审查元素发现复选框（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;
      }
    }
  }
}

感谢观看！