按照数字排序

要求后端返回的level是数字

  const columns = [{title: '等级,dataIndex: 'level',key: 'name',render: (_) =>_,
sorter: (a, b) => a.level - b.level,},
]

自定义排序：仅做示例

假设后端返回的不是数字，而是时间，比如2021-05-24 10:54:31

const columns=[   {title: '时间',dataIndex: 'gradeUpAt',render: (_) => _,sorter: {compare: (a, b) => {console.log('a')a = a.gradeUpAt == '无' ? 0 : new Date(a.gradeUpAt).getTime();b = b.gradeUpAt == '无' ? 0 : new Date(b.gradeUpAt).getTime();return a - b;},},},]

通过请求后端接口排序

分为四步：

columns里面的sorter直接设为true

const columns=[
{title: '时间',dataIndex: 'exp',render: (_) => _,sorter: true},]

给table绑定onChange事件

 <Tablecolumns={columns}dataSource={tabData}onChange={(pagination, filters, sorter) => { changetable(pagination, filters, sorter) }}/>

监听onChange事件里面的sorter排序

  const changetable = (pagination, filters, sorter) => {if (sorter.order) {
//当前处于升序或者降序 sorter.order == "descend" ? '降序' : '升序'} else {//取消排序}}

请求接口

antd-- table表格排序相关推荐

antd table 表格中英文字母不换行问题
在table表格中 ,如果英文字母,就会出现不换行问题解决办法在对应column中给加上wordWrap: 'break-word', wordBreak: 'break-word' 即可 con ...
antd table表格选中每行设置背景色
1.文档显示,table表格中有rowClassName属性 Table 参数 --------------------------------- 说明------------------------ ...
vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会 ...
Vue Element-ui Table表格排序
一.表格中有时候会有排序的需求,如果只针对当前页进行排序,那么前端就可以实现排序,在对应需要排序的字段中,使用sortable字段即可. <el-table-columnprop="d ...
antd vue 表格排序升序
1.按照中文首字母排序 {title: '乡镇',width: 100,align: 'center',dataIndex: 'village',//antdv表格,按中文首字母排序:升序,降序:so ...
antd table表格错位
当遇到antdtable表格错位的时候,过查找资料,发现最后一列就不用设置的话,就不会再错位,因为antd会自己给最后一列分配宽度. 在这里还遇到一个问题,就是当我们给列设置的宽度不合理的话(一般情况 ...
antd table 表格错位的问题
转载于: https://blog.csdn.net/fhjdzkp/article/details/86249969 当遇到antdtable表格错位的时候,看文档,文档上说的是,要设置每一列的宽度 ...
react antd Table 表格 td超出自动换行
1.问题: 目前有打印需求遇到了点问题,打印时表头太长导致出现横向滚动条,而借助于 react-to-print只能打印出视图区可见内容,所以打印的时候滚动条里面的内容没打印到. 现在为了完整打印页面 ...
React Table 表格组件使用教程排序、分页、搜索过滤筛选功能实战开发
React Table 表格组件使用教程 react-table 安装和使用 React Table 表格排序功能 React Table 表格搜索过滤筛选功能 React Table 表格分页功能 ...
在Web页面实现表格排序功能：jQuery、Vue等思路分析
参考思路 01 jQuery <Jquery对Table表格排序(方法一)> https://blog.csdn.net/wdfscp/article/details/8373311 主要 ...

antd-- table表格排序

按照数字排序

自定义排序：仅做示例

通过请求后端接口排序

antd-- table表格排序相关推荐

最新文章

热门文章