Vue中使用andt组件a-table列表数据根据点击的表头进行升/降排序-案例
官方示例-API链接
数据根据当前点击的内容进行升降排序
使用步骤
数据量过少,可以使用前端排序方式
//官方案例
<template><a-table :columns="columns" :data-source="data" @change="onChange" />
</template>
<script>
const columns = [{title: 'Name',dataIndex: 'name',filters: [{text: 'Joe',value: 'Joe',},{text: 'Jim',value: 'Jim',},{text: 'Submenu',value: 'Submenu',children: [{text: 'Green',value: 'Green',},{text: 'Black',value: 'Black',},],},],// specify the condition of filtering result// here is that finding the name started with `value`onFilter: (value, record) => record.name.indexOf(value) === 0,sorter: (a, b) => a.name.length - b.name.length,sortDirections: ['descend'],},{title: 'Age',dataIndex: 'age',defaultSortOrder: 'descend',sorter: (a, b) => a.age - b.age,},{title: 'Address',dataIndex: 'address',filters: [{text: 'London',value: 'London',},{text: 'New York',value: 'New York',},],filterMultiple: false,onFilter: (value, record) => record.address.indexOf(value) === 0,sorter: (a, b) => a.address.length - b.address.length,sortDirections: ['descend', 'ascend'],},
];const data = [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park',},{key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park',},{key: '3',name: 'Joe Black',age: 32,address: 'Sidney No. 1 Lake Park',},{key: '4',name: 'Jim Red',age: 32,address: 'London No. 2 Lake Park',},
];function onChange(pagination, filters, sorter) {console.log('params', pagination, filters, sorter);
}export default {data() {return {data,columns,};},methods: {onChange,},
};
</script>
--------------------------------------------------------------------------------
// 表格列的配置描述 - 简版
const columns = [...{title: '实验名称',key: 'abName',slots: { customRender: 'abName' },width: '16%',sorter: (a, b) => {let prev = a.abName ? a.abName : '';let next = b.abName ? b.abName : '';return prev.localeCompare(next, 'zh-Hans-CN', { sensitivity: 'accent' });},}...
]
如果数据过多建议后端进行排序,前端会有分页,且不会一次拿完所有数据,可以使用后端排序
将需要排序的列设置属性 sorter: true
// 表格列的配置描述
const columns = [...{title: '实验名称',key: 'abName',slots: { customRender: 'abName' },width: '16%',sorter: true}...
]
点击表头文字右边的上下箭头时会触发table的change事件
<a-tablev-show="abProductManagerListQueryCode"borderedv-bind="tableProps":columns="columns":row-key="(record) => record.abNameId"@change="pageChange":pagination="{defaultPageSize: 10,showSizeChanger: true,showQuickJumper: true,total: tableProps.totalData,showTotal: (total, range) => `共 ${total} 条`,pageSizeOptions: ['10', '20', '30', '40', '50'],}"
>
...
</a-table>// change事件绑定的函数
function pageChange(page, filters, sorter) {console.log(page);console.log(filters);console.log(sorter);
}
第一次点击名称右边箭头时触发事件,朝上箭头高亮,为升序
第二次点击名称右边箭头时触发事件,朝下箭头高亮,为降序
第三次点击名称右边箭头时触发事件,朝上朝下箭头都不高亮,为既不升序,也不降序
参数说明
1.每次点击时都能拿到当前的点击对象(比如列子中Age),可以通过sorter参数里面的columnKey拿到。
2.每次点击时可以区分是升序、降序、还是既不升序也不降序,
sorter参数中order值为"ascend"时为升序;
sorter参数中order值为"descend"时为降序;
sorter参数中没有order键时为既不升序也不降序。所以我们就可以在change绑定的事件中,根据排序的类型(点击的哪一列)、升序还是降序来向服务器发送请求拿到数据。
所以在确认当前点击的是哪一列时应该取sorter参数中的columnKey字段。
Vue中使用andt组件a-table列表数据根据点击的表头进行升/降排序-案例相关推荐
- ant-design中对单个或多个table列表数据进行动态列合并
文章目录 一. 实现效果 二. 实现方法 2.1 版本:ant-design-vue:"^2.1.2" 2.2 方法:a-table组件里面的customCell功能 2.3 注意 ...
- vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件 发布时间:2021-06-11 17:26:48 来源:亿速云 阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
- vue中写svg组件svg图片加载不出来
vue中写svg组件svg图片加载不出来 结构 首先要安装3个插件:svg-sprite-loader,svgo,svgo-loader npm install svg-sprite-loader - ...
- vue中,兄弟组件之间传值
vue中,兄弟组件之间传值 项目中,需要使用多个子组件,当需要传递值的时候,较为麻烦,怎样实现呢 1.一般可以使用子组件a传递给父组件,再由父组件传递给子组件b.但是一般较为麻烦, 2.使用bus作为 ...
- Vue中,一个组件调用其他组件的方法(非父子组件)
Vue中,一个组件调用其他组件的方法(非父子组件) 场景--B页面(组件)想调用 A页面(组件)中的方法:但是两个页面(组件)毫无关联(刷新 A的数据). 方式一:引用式 1.当前组件引入将要调用方法 ...
- Vue项目 音乐播放器 学习笔记 列表数据 Ⅱ
Home 组件 1. 创建新 Home 2. 创建 Home 相关组件 3. 编写组件代码 Home 组件 1. 创建新 Home 在 views 文件夹中新建 Home 文件夹用来存放主页的视图,将 ...
- vue 编辑弹框,编辑页面,列表数据也会跟着变
vue 编辑弹框,编辑页面,列表数据也会跟着变 editPoster(row) {// this.form = JSON.parse(JSON.stringify(row)) //避免引用传递,做一次 ...
- 后台管理系统中的antd vue中的问题(动态加载列表a-select-option,后台管理中a-selct-option的回显)
一.antd vue中的a-select的动态加载列表a-select-option 1.既然是动态加载选择框的列表a-select-option,必然存在获取后台数组,并循环 后台数组格式: 数组( ...
最新文章
- 安装 Python MySQL 驱动(mysql-connector-python、MySQL-python)
- 宏与内联(inline)的区别(转载)
- 【Linux 线程】常用线程函数复习《三》
- 微信分享接口调用(自测通过可以用)
- java中sql语句怎么把开始和结束时间作为参数写sql查询_java程序员跳槽的一道坎,大公司面试官都会问的Mybatis...
- 什么是JAP,什么是ORM,与hibernate的关系
- 阿里云国际版服务器电子商务直播解决方案
- 两个向量叉乘表示什么意思_为什么向量积(叉乘)的这两个概念是这样的?
- 支持随时随地一键开会,华为云会议场景适用性更强!
- 防止学生机退出电子教室软件的方法
- 怎样将图片体积缩小?如何一键完成图片压缩?
- KNIME 学习、下载
- 外观模式-简化子系统的复杂性
- (五)IEEE802.1Q与ISL
- 【国产FPGA】国产FPGA搭建图像处理平台
- Android平台TCP网络转发实现方案(redsocks+iptables+socks5)
- win7优化设置_Win7旗舰版系统磁盘碎片整理程序几种打开方法
- 如何获取IOS手机已安装app的bundleid
- Cheeses and bread
- 手把手教你分析解决MySQL死锁问题
热门文章
- 声学传感技术综述 (A survey on acoustic sensing)
- SEO站外优化有哪些方法?
- vivo手机怎么弄html,vivo录制屏幕设置声音(手机怎么录制内部声音)
- dedecms模板中调用热门搜索关键词的方法
- ContikiMAC RDC协议
- 商标申请主体证明文件主体材料资格证明都有哪些
- 中日IT软件行业对比
- 每天起床运行十分钟这几行代码,电脑运行瞬间炸裂
- 华为应用市场上传APP失败多次因为:您的应用在用户同意隐私政策前申请获取用户的(MAC地址)个人信息。
- 2021蕲春益才中学高考成绩查询,携手并肩 再谱新篇 | 黄冈市益才国际学校高中部2020—2021学年秋季期末线上家长会...