排序时如何限制表头的可点击区域

Question

当我们在 ant design 表格中启用列排序时，整个列标题将是可点击的。但我想将可点击区域缩小到标题中的特定自定义排序图标。或者禁用该列单击行为并从自定义图标触发排序。有什么办法可以做到吗？

Answer 1

您可以通过

columns

的

title

属性定义自定义列标题组件，然后您可以在其中创建自定义图标来触发表格的

dataSource

属性的手动排序。请参阅以下 CodeSandbox 链接。

Answer 2

• 将所有您不想在单击列标题时排序的内容包含在 div/span 中

• 如下所示，第一个跨度包含您的标题，然后下一个跨度包含您不希望受到默认列排序影响的内容

• 为第二个跨度添加单击事件处理程序并使用 e.stopPropagation();单击内部，这样事件就不会传递给父级，这就是默认排序不会自行唤醒的原因

title : 
<span className='title'>Title</span>
<span onClick={(e)=>{e.stopPropagation();}}> {"things which you dont want to get affected by default column sorting in title"}</span>