antd表格自定义排序——默认文字设置

1,633 阅读1分钟

需求:表格点击排序后按名称首字母排序

实现:查阅文档,可以使用sorter属性,传入自定义排序函数

<Column
title="名称"
dataIndex="name" 
sorter={(a, b) => {
    if (a.name && b.name) {
        // 按首字母排序 string.localeCompare(string)
        return a.name.localeCompare(b.name)
    }
}}
/>

效果:

image.png

排序实现了,但是文本却没有定义,又翻阅了好久,百度发现了toolTip,放在这里却不好用,在文档里找到了:showSorterTooltip,传入自定义标签

<Column
title="表头"
dataIndex="name" 
sorter={(a, b) => {
    if (a.name && b.name) {
        return a.name.localeCompare(b.name)
    }
}}
//新增
showSorterTooltip={{title:<div>点击按品类首字母排序</div>}}
/>

效果:

image.png 效果基本达成,但是还有遗憾,能不能默认排序和按首字母排序时有不同的文字提示呢?这一点还没有找到相应的属性,如果大家知道的,希望能告诉我一下,感谢!

另外,Tooltip在表格里做一个小提示,效果也很棒

 <Column
    title={<div>操作&nbsp;
    <Tooltip placement='bottom' title="删除需谨慎">
        <ExclamationCircleOutlined />
    </Tooltip>
    </div>}
 ……

效果:

image.png

虽然问题不难,但是花了蛮长时间去解决,因此记录一下~