Ant design 表格字段排序

//按数字大小排
sorter: (a, b) => a.type - b.type,
//按length排序
sorter: (a, b) => a.name.length - b.name.length,

//根据汉字拼音来排序。

sorter: (a, b) => a['dataIndex'].localeCompare(b['dataIndex']) 升序

sorter: (a, b) => b['dataIndex'].localeCompare(a['dataIndex']) 降序

{ align: 'center', title: '地区', dataIndex: 'region', with: '25%', sorter: (a, b) => a['region'].localeCompare(b['region']) }

结果：

补充

const columns = [{title: '汉字',dataIndex: 'name',sorter:(a,b) => a.name.localeCompare(b.name)},{title: '数字',dataIndex: 'amount',sorter: (a, b) => Number(a.amount) - Number(b.amount),},{title: '字符串',dataIndex: 'value',sorter: (a, b) => a.value.localeCompare(b.value)}，{title: '字符串',dataIndex: 'pbom',sorter: (a, b) => {for (let i = 0; i < a.pbom.length; i++) {if (b.pbom[i] !== undefined) {if (a.pbom.charCodeAt(i) > b.pbom.charCodeAt(i)) {return 1;} else {return -1;}} else {return -1;}}}}
];

补充：日期排序

sorter: (a, b) => {const aTime = new Date(a.nowTime).getTime()const bTime = new Date(b.nowTime).getTime()return aTime - bTime}

Ant design 表格字段排序相关推荐

ant design表格添加loading效果
这里看一下ant design中表格添加loading效果. 在页面进来,获取数据时候获取到数据的时候实现方法: 这里只需要在要渲染的表格中添加,loading={XXXX} 即可.大括号里面的值 ...
ant 改变表格数据_React ant design表格导出数据为EXCEL表格数据
一.由于公司项目需要,需要将表格数据导出为EXCEL表格数据.环境React+Ant Design 二.安装插件js-export-excel yarn安装-记得以管理员身份执行 yarn add j ...
Ant Design 表格：循环展示表头，表头添加图标icon
需求背景: 用来统计房间里住户的信息实现效果: 实现过程: 表头:问题a,问题b,问题c,是从动态数据循环获取得到的,包括右侧的icon,和鼠标以上显示的效果:toolt ...
element-ui学习一：table表格字段排序
一. 概述 elementui官网已有相关解释,可以去官网查看.这边再简单讲述一下具体使用方法二.前端排序在对应需要排序的字段中,使用sortable字段即可,这样就可以实现前端数据排序,但是如果 ...
easyui 实现表格字段排序
首先注意:排序的字段不能是字符串的类型,就是所说的中文吧,如果中文排序也没什么意义 html代码 $('#myTable').treegrid({ url:'/category/position/Te ...
antd 表格树如何展开_React Ant Design树形表格的复杂增删改
React Ant Design树形表格的复杂增删改最近由于业务接触了antd,使用antd完成一个复杂的树形表格的显示以及修改.在这其中碰见了很多坑,不少功能antd只写了初步的功能,更为细化 ...
Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
Vue3 + Ant Design Vue 可搜索自定义字段 a-tree
记录一下,使用 Ant Design Vue a-tree 需要实现可搜索且后台返回数据不是标准数据的问题目录可搜索自定义字段完整全部代码可搜索自定义字段实现自定义字段需要使用 Tree ...
Ant Design Pro使用之--EditableProTable 可编辑表格
前言--EditableProTable 与 ProTable的对比首先:可编辑表格 EditableProTable 与 ProTable 的功能基本相同: 但是如果用ProTable的话,增和改 ...

Ant design 表格字段排序

Ant design 表格字段排序相关推荐

最新文章

热门文章