工作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"// 根据当前排序重新获取后台数据,一般后台会需要一个排序的参数}
}

工作87：element-ui el-table sortable属性参数详解相关推荐

maven各个属性参数详解
转载于:https://blog.csdn.net/earbao/article/details/49924943?utm_source=copy <project xmlns="ht ...
clip属性参数详解
前面说到图片裁剪主要用到clip属性,是css的clip不是canvas的clip(),这里详细说一下参数的意义 w3c是这么介绍的设置元素的形状.唯一合法的形状值是 clip : rect (to ...
Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
rsync的介绍及参数详解，配置步骤，工作模式介绍
rsync的介绍及参数详解,配置步骤,工作模式介绍 rsync是类unix系统下的数据镜像备份工具.它是快速增量备份.全量备份工具. Sync可以远程同步,支持本地复制,或者与其他SSH.rsync主 ...
Python|线程和进程|阻塞|非阻塞|同步|异步|生成器和协程|资源竞争|进程间通信|aiohttp库|daemon属性值详解|语言基础50课：学习（11）
文章目录系列目录原项目地址第34课:Python中的并发编程-1 线程和进程多线程编程使用 Thread 类创建线程对象继承 Thread 类自定义线程使用线程池守护线程资源竞争 G ...
sketch如何做设计稿交互_《动静之美——Sketch移动UI与交互动效设计详解》历程...
随着移动互联网的迅速崛起,对移动产品界面的设计质量和迭代速度都有了更高的要求,市面上开始涌现出一批专门针对移动UI设计的软件,Sketch便是其中的佼佼者.Sketch因其强大的功能以及极低的入门门槛 ...
【iVX 开发 - 入门】UI 组件介绍及实操详解
本文导读写在前面 iVX 各 UI 组件及属性面板详解 1. 图片组件 2. 图片序列组件 3. 文本组件 4. 输入框组件 5. 富文本/富文本编辑器组件 6. 地图组件 7. 二维码组件写在前 ...

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

工作87：element-ui el-table sortable属性参数详解相关推荐

最新文章

热门文章

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

工作87：element-ui el-table sortable属性 参数详解相关推荐

最新文章

热门文章

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

工作87：element-ui el-table sortable属性参数详解相关推荐