antd-vue中的表格排序

在使用antd-vue的表格想实现排序，但是不知道怎么弄的可以看这里，此处讲解了一个是数字类的排序（例如成绩），一个是字符串类的排序(例如姓名)。
那么，我们开始吧。

字符串类型的排序

如图，我们要实现对字符串的排序，按照设备类型进行排序。

首先，antd的官方说了，在定义列columns时，里面有一个sorter排序，antd表格,下面是定义列的数据格式。

//注意，此处我只摘取了定义设备类型这一列的字段。
//我们重点看sorterconst deviceColumns= [{title: '设备类型',dataIndex: 'type',key: 'type',sorter: {compare: (a, b) => {let a1 = a.type.slice(0, 1).charCodeAt();let b1 = b.type.slice(0, 1).charCodeAt();if (a1 < b1) {return -1;}if (a1 > b1) {return 1;}if (a1 == b1) {return 0;}},},}],//解释://列里面的sorter是可以进行排序的，里面的compare()函数就是我们的排序函数的逻辑。//思路:根据charCodeAt()获取到字符串的unicode编码，根据unicode编码去进行排序。//重点讲解:compare: (a, b) => {//a.type就是字符串"基站" "引擎",这边我是需要截取到基/引，然后再获取到unicode编码。//charCodeAt()如果里面不传参数，默认找0的unicode编码let a1 = a.type.slice(0, 1).charCodeAt();let b1 = b.type.slice(0, 1).charCodeAt();//此处，如果a1<b1,返回-1代表a1排前面if (a1 < b1) {return -1;}//此处，如果a1>b1,返回1代表a1排后面if (a1 > b1) {return 1;}//此处返回0就是不动if (a1 == b1) {return 0;}},

好了,理解玩代码之后那你就已经实现了功能啦，如图：

数字类型的排序

对于数字类型的排序更简单了，我们只需要直接return出a-b即可,此处以上图卡号为例.

 const deviceColumns= [{title: '设备类型',dataIndex: 'type',key: 'type',sorter: {//数字的直接return a-b;即可(负数为升序)compare: (a, b) => {return a.card- b.card}},}],

antd-vue中的表格排序相关推荐

Vue 中的表格操作
Vue 中的表格操作在 Web 开发中,表格是非常常见的元素之一.在 Vue 中,我们可以使用一些组件和插件来实现表格的操作.在本文中,我们将介绍 Vue 中的表格操作的基本原理和用法,并给出一些实 ...
后台管理系统中的antd vue中的问题(动态加载列表a-select-option,后台管理中a-selct-option的回显)
一.antd vue中的a-select的动态加载列表a-select-option 1.既然是动态加载选择框的列表a-select-option,必然存在获取后台数组,并循环后台数组格式: 数组( ...
Vue中动态显示表格内容
Vue中动态显示表格内容在项目中,我们可能会用到表格来显示不同的数据,表格显示数据,无非是列的内容不同,所以,我们可以考虑封装个公共的表格组件,动态得显示不同的数据实现截图如下: 1.首先在项目中 ...
vue中打印表格，打印不全的问题
vue中打印表格,打印不全的问题 html部分 <TableDetailsclass="table-box"ref="inventoryDetails"& ...
vue中table表格导出为图片格式
vue中table表格点击下载为图片格式实现思路:给页面中需要导出为图片的内容添加id名,调用封好的方法即可直接导出.以下是具体的实现方法 1.安装依赖 npm install --save htm ...
Vue中实现表格隔行换色效果
一.原理在 Vue 中,进行表格行的循环输出时,一般使用 v-for 指令,每次循环都能得到该行的索引 index ,用每一行的索引除以2取余,余数等于1,可以使用一种颜色作为背景色,余数等于0,可 ...
Vue Element-ui Table表格排序
一.表格中有时候会有排序的需求,如果只针对当前页进行排序,那么前端就可以实现排序,在对应需要排序的字段中,使用sortable字段即可. <el-table-columnprop="d ...
antd vue中，如何给表单动态添加input，解决遇到一些坑
最近做项目用的组件库Ant Design Vue,这个组件看起来文档很详细,但也会遇到一些意想不到的问题,最后看文档没办法解决,只能去看源码,折腾了好久,终于把问题给解决了,遇到的问题主要是当添加in ...
vue 中 vue-print-nb 表格打印不全的问题
先安装 vue-print-nb npm install vue-print-nb --save 然后main.js引入 import Print from 'vue-print-nb' Vue.us ...

antd-vue中的表格排序

antd-vue中的表格排序

字符串类型的排序

数字类型的排序

antd-vue中的表格排序相关推荐

最新文章

热门文章