场景描述
- 使用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;
}
}
}
}