工作87:element-ui el-table sortable属性 参数详解

表格组件的排序功能,点击排序表头可以进行升序和降序进行排序
在这里插入图片描述
上代码

<el-table:data="tableData"style="width: 100%"<!-- 数据由后台进行排序时sortable="custom",需要监听排序点击事件,会返回当前的prop和order -->@sort-change="changeSort"<!-- default-sort指定的默认排序,默认用date这一列排序,排序为升序,默认的排序也是升序 -->:default-sort="{prop: 'date', order: 'ascending'}"border><el-table-columnprop="date"label="日期"<!-- 如果需要对表格的那一列进行排序,加一个sortable参数,可取的值有true,false,custom -->sortable<!-- sort-orders接收一个数组,用来指定点击可排序表头时排列的顺序,默认是['ascending', 'descending', null]点击时先升序ascending,再点击降序descending,再点击不排序null,按表格的默认索引排.可以自己设置排列顺序 -->:sort-orders="['ascending', 'descending']"width="180"></el-table-column><el-table-columnprop="name"label="姓名"<!-- sort-by指定数据按哪个属性进行排序,如果不指定,就是按这里的prop值排,指定一个时写成字符串形式:sort-by="name",指定多个时,使用数组.这里的效果就是,当姓名的值全部一样时,就按address进行排序 -->:sort-by="['name', 'address']"sortablewidth="180"></el-table-column><el-table-columnprop="address"label="地址"<!-- 以上的参数排序都是在已得到的tableData数据上进行排序,如果数据做了分页当前的数据不是全部的数据时,排序就需要后台进行排序,这时需要把sortable的值改为custom,在table中用sort-change事件监听排序点击事件 -->sortable="custom"></el-table-column>
</el-table>methods: {// 从后台获取数据,重新排序changeSort (val) {console.log(val) // column: {…} order: "ascending" prop: "date"// 根据当前排序重新获取后台数据,一般后台会需要一个排序的参数}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/416302.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux文件基础知识,linux文件系统基础知识

利用直接指针、单级间接指针、二级间接指针、三级间接指针可保存的最大文件大小为&#xff1a;1024*121024*2561024*256*2561024*256*256*25616843020 KB&#xff0c;约 16GB若数据块大小为2048B&#xff0c;指针占4B&#xff0c;则最大文件大小为&#xff1a; 2048*122048*512…

[LeetCode] 547. Friend Circles Java

题目&#xff1a; There are N students in a class. Some of them are friends, while some are not. Their friendship is transitive in nature. For example, if A is a direct friend of B, and B is a direct friend of C, then A is an indirect friend of C. And we de…

工作88:vue实现当前页面刷新

想必大家在刨坑vue的时候也遇到过下面情形&#xff1a;比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种&#xff1a; 如果希望点击确定的时候&#xff0c;Dialog 对话框关闭的时候&#xff0c;当前http://localhost:9530/#/supplier/supplierAll页面可…

linux文件系统叫什么,【整理】什么是根文件系统(rootfs=Root Fils System)

Linux系统中的根文件系统&#xff0c;Root FileSystem&#xff0c;简称为rootfs&#xff1b;关于rootfs&#xff0c;之前一直很迷惑&#xff0c;不知道所要表达的真正的含义&#xff1b;即便是通过buildroot自己建立了相关的rootfs之后&#xff0c;还是没能很明白的理解&#x…

工作89:vue竖直的显示表头的表格(vue版本)

今天遇到一个问题&#xff0c;实现这样一个竖直的显示表头的表格&#xff0c;如下图。默认显示两列。 vue实现代码如下&#xff1a; tableComponent.vue&#xff1a; <template> <table class"mailTable" :style"styleObject" v-if"s_show…

【python之路】数据库2

一、数据库存储引擎 1.什么是存储引擎 mysql中建立的库>文件夹 库中建立的表>文件  现实生活中我们用来存储数据的文件应该有不同的类型&#xff1a;比如存文本用txt类型&#xff0c;存表格用excel&#xff0c;存图片用png等 数据库中的表也应该有不同的类型&#xff0c…

linux服务器配置端口,Linux服务器配置-新增端口

1、我们需要知道操作的Apache配置文件在Linux服务器上面的路径&#xff1a;/etc/apache2/&#xff0c;用cd命令即可&#xff1a;cd /etc/apache2/在服务器上&#xff0c;我们通过ls命令查看配置文件&#xff1a;2、需要用到的是设置端口的文件ports.conf 以及sites-enabled目录…

3224: Tyvj 1728 普通平衡树

3224: Tyvj 1728 普通平衡树 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 14480 Solved: 6275Description 您需要写一种数据结构&#xff08;可参考题目标题&#xff09;&#xff0c;来维护一些数&#xff0c;其中需要提供以下操作&#xff1a;1. 插入x数2. 删除x数(若有…

linux编译c++ 静态库,C/C++ 条件编译静态库

》windows 下方法&#xff1a;1.方法一&#xff1a;VS工程中中直接添加1.1在VS的属性-》常规-》附加库目录&#xff0c;添上文件夹的路径:例如&#xff1a;lib/x64&#xff1b;1.2输入的附加依赖项&#xff0c;添加上库的名字&#xff0c;例如&#xff1a;dmapi.lib1.3 对用到该…

[BZOJ 2654]tree(陈立杰)

Description 给你一个无向带权连通图&#xff0c;每条边是黑色或白色。让你求一棵最小权的恰好有need条白色边的生成树。题目保证有解。Input 第一行V,E,need分别表示点数&#xff0c;边数和需要的白色边数。接下来E行,每行s,t,c,col表示这边的端点(点从0开始标号)&#xff0c;…

DM3软件如何在linux中安装,DM3 文件扩展名: 它是什么以及如何打开它?

DM3 疑难解答频繁的 DM3 打开问题ImageJ 不存在你尝试加载 DM3 文件并收到错误&#xff0c;例如 “%%os%% 无法打开 DM3 文件扩展名”。 通常&#xff0c;%%os%% 中会出现这种情况&#xff0c;因为 ImageJ 未安装在你的电脑上。 你将无法双击以打开 DM3&#xff0c;因为你的操作…

CentOS6.8下安装memcached并设置开机自启动

参考资料&#xff1a;http://www.cnblogs.com/handongyu/p/6419305.html http://coolnull.com/1986.html 一、安装libevent 首先检查系统中是否安装了libevent [rootyeebian ~]# rpm -qa | grep libevent 如果安装了则查看libevent的安装路径&#xff0c;后续安装时需要用到 […

ftp 530 linux,Linux启动ftp服务器530 Permission denied解决方法

重新在虚拟机下安装了linux。现在我想启动linux自带的ftp服务器&#xff1a;#service vsftpd start 。如果想linux启动是自动启动ftp服务器&#xff1a;#chkconfig vsftpd on 。运行putty&#xff0c;以root身份进入&#xff0c;出现了报错 530 Permission denied &…

Shiro身份认证授权原理

shiro在应用程序中的使用是用Subject为入口的&#xff0c; 最终subject委托给真正的管理者ShiroSecurityMannager Realm是Shiro获得身份认证信息和来源信息的地方(所以这里是我们实现的)我们只要继承他的实现类重写方法就好了&#xff0c;AuthorizingRealm 身份认证过程 自定义…

linux进程路由策略,linux路由表,策略路由,路由查找

路由表内核中路由表有2种&#xff1a;l 一个是缓存路由(fib)&#xff0c;是自动学习生成自动管理的&#xff0c;用户没必要去干预&#xff0c;但是内核还是提供了方法让用户可以去清空它。但是用户不能设置它的项&#xff0c;但是可以根据这个缓存更新的原理从外部影响他。l 路…

图形桌面linux触摸,新手看招:用图形桌面访问Linux操作系统

创建用户帐户&#xff1a;adduser login-name (OS:Red Hat)useradd login-name (OS:SuSe)为帐户添加密码&#xff1a;passwd login-name (密码应该包括一个数字&#xff0c;且不能为英文单词)结束登录程序&#xff0c;启动另一登录实例&#xff1a;CtrlD从终端启动图形窗口环境…

Python namedtuple(命名元组)使用实例

Python namedtuple(命名元组)使用实例 #!/usr/bin/python3import collectionsMyTupleClass collections.namedtuple(MyTupleClass,[name, age, job]) obj MyTupleClass("Tomsom",12,Cooker) print(obj.name) print(obj.age) print(obj.job)执行结果&#xff1a; To…