需求:表格点击排序后按名称首字母排序
实现:查阅文档,可以使用sorter属性,传入自定义排序函数
<Column
title="名称"
dataIndex="name"
sorter={(a, b) => {
if (a.name && b.name) {
// 按首字母排序 string.localeCompare(string)
return a.name.localeCompare(b.name)
}
}}
/>
效果:
排序实现了,但是文本却没有定义,又翻阅了好久,百度发现了toolTip,放在这里却不好用,在文档里找到了:showSorterTooltip,传入自定义标签
<Column
title="表头"
dataIndex="name"
sorter={(a, b) => {
if (a.name && b.name) {
return a.name.localeCompare(b.name)
}
}}
//新增
showSorterTooltip={{title:<div>点击按品类首字母排序</div>}}
/>
效果:
效果基本达成,但是还有遗憾,能不能默认排序和按首字母排序时有不同的文字提示呢?这一点还没有找到相应的属性,如果大家知道的,希望能告诉我一下,感谢!
另外,Tooltip在表格里做一个小提示,效果也很棒
<Column
title={<div>操作
<Tooltip placement='bottom' title="删除需谨慎">
<ExclamationCircleOutlined />
</Tooltip>
</div>}
……
效果:
虽然问题不难,但是花了蛮长时间去解决,因此记录一下~