Vue Element-ui Table表格排序

一.表格中有时候会有排序的需求，如果只针对当前页进行排序，那么前端就可以实现排序，在对应需要排序的字段中，使用sortable字段即可。

    <el-table-columnprop="date"label="日期"width="180"sortable    //在需要排序的字段中，添加sortable，就可以在前端实现当前页中的排序:default-sort="{prop: 'date', order: 'ascending'}"  //default-sort指定的默认排序,默认用date这一列排序,排序为升序,默认的排序也是升序。这个语句根据自己的需求可要可不要。>  </el-table-column>

二.存在分页的情况时，前端仅仅使用sortable当前页排序已经不能满足我们的需求，无法对所有数据进行排序。这时候我们就要使用后端排序。

给el-table设置事件@sort-change=“onSortChange”

<el-table:data="dataList" borderstyle="width: 100%height="calc(100vh - 250px)" @sort-change="onSortChange">  //onSortChange为排序发生改变时调用的方法
</el-table>

给需要排序的表格设置属性sortable=“custom”

<el-table-column label="操作时间" prop="opTime" sortable="custom"    //sortable="custom"表示使用的排序为后端排序:sort-orders="['ascending', 'descending']"  // sort-orders接收一个数组,用来指定点击可排序表头时排列的顺序,>                                       //默认是['ascending', 'descending', null]点击时先升序ascending,再点击降序descending,再点击不排序null,
</el-table-column>                               //按表格的默认索引排.可以自己设置排列顺序 。//根据自己的需求可选择写不写这个语句，不写则默认是['ascending', 'descending', null]

声明 onSortChange()

    //点击时间排序
onSortChange(column){console.log("column____________",column);  //打印出传入的column，发现里面有3个数据this.listQuery.sortType= column.order === "ascending" ? 1 : column.order === "descending" ? 0 : ""      //将sortType设置为与后端约定的排序值，1为升序，0为降序，null为默认不排序this.getList()},

打印出传入的column，发现里面有3个数据，分别代表的意义是：
column：当前列；
order：排序的规则（升序ascending、降序descenting和默认的没有排序null）；
prop：表格中排序的字段名。

Vue Element-ui Table表格排序相关推荐

Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
vue element ui合并表格（合并某列的行数据）
需求:按需合并某些列的数据自定义数据: tableData:[ { num:0, new_subject_name:"new_subject_name1", count1:&qu ...
element ui table表格轮播
element ui 用table表格示例不用添加任何语法,配上我下方的方法就没可以轻松实现表格轮播效果: 这个方法放在methods()方法里然后在mounted()中调用就可以了,注意我方法里ri ...
element ui 解决表格排序失效
一.问题说明: element ui 排序很简单只需要加 sortable="custom" 通过后端排序后,吧数据返回至前端,但是当你对表格进行行内编辑,或者其他的复杂操作时,就 ...
设置element ui table表格线条颜色以及设置圆角/解决element ui table设置圆角后线条不显示或显示模糊问题，亲测有效
问题描述 table表格设置为圆角后并且设置table border颜色,设置圆角后导致修改颜色后的border无法显示问题解决 /* 设置圆角以及边框颜色 */.el-table{border-r ...
element UI (table表格)
table 左对齐 <el-table:header-cell-style="{'text-align':'left'}":cell-style="{'text-a ...
Element ui Table表格匹配字典项中的数据
在工作中通常会遇到Table表格匹配字典项中的数据这里介绍几种方法大家仅供参考 <el-table:data="tableData"style="width: 10 ...
vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能
一.应用场景按照需求导出功能分为勾选批量导出及按照查询结果导出,考虑到接口操作导出的复杂性,因此实现了js控制导出的功能导出功能截图二.安装相关依赖 cnpm install --save xl ...
记录：element UI table 表格固定列单元格上下错位
一.表格添加ref <el-table ref="table"></el-table> 二.页面切换或数据更新时调用 this.$nextTick(() = ...

Vue Element-ui Table表格排序

一.表格中有时候会有排序的需求，如果只针对当前页进行排序，那么前端就可以实现排序，在对应需要排序的字段中，使用sortable字段即可。

二.存在分页的情况时，前端仅仅使用sortable当前页排序已经不能满足我们的需求，无法对所有数据进行排序。这时候我们就要使用后端排序。

Vue Element-ui Table表格排序相关推荐

最新文章

热门文章