elementui表格排序功能

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。
在列中使用sort-by定义排序规则
在第一个参数相等的情况下，对第二个参数
代码如下：

<template><div class="about"><h1>About Element UI Table</h1><el-table:data="tableData"style="width: 100%":default-sort="{prop: 'fee',order:'descending'}"><el-table-column type="index"><template slot-scope="scope"><div :class="scope.$index<=2?'highlight-index':''">{{scope.$index+1}}</div></template></el-table-column><el-table-columnprop="date"label="日期"width="180":formatter="dateFormatter"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="gender"label="性别"width="180"><template slot-scope="scope">{{scope.row.gender|genderFormatter}}</template></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnprop="fee"label="保费"sortable:sort-by="['fee','salesCount']"></el-table-column><el-table-columnprop="salesCount"label="件数"sortable:sort-by="['salesCount','fee']"></el-table-column></el-table></div>
</template>
<script>
export default {data () {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',gender: 'male',fee: 123,salesCount: 1122}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',gender: 'female',fee: 343,salesCount: 1300}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',gender: 'female',fee: 23,salesCount: 122}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',gender: 'male',fee: 343,salesCount: 5455}]}},methods: {dateFormatter (row) {return row.date.slice(0, 7)}},filters: {genderFormatter (gender) {const map = {male: '男',female: '女'}return map[gender]}}
}
</script>
<style>
.highlight-index {background-color: #333;color: #fff;
}
</style>

//此处的Key不确定是干啥的~<el-table :key="tableKey"  //v-loading是用于显示表格中是否在数据请求时显示正在加载中，一般是数据请求时显示，数据请求后不显示v-loading="listLoading" //data是表格中的数据:data="list" //表格的高度:height="screenHeight" //监听属性排序的方法@sort-change="sortChange"//表格中数据加载时，显示的文字可以进行自定义element-loading-text="正在努力加载中..." //表格的边框border //表格中宽度是否自动撑开fit //表格中的当前行是否高亮显示highlight-current-row //表格显示css样式，比如设置宽度style="width: 100%">//此列为序号，label标签 type是自定义的序号为Index,align是居中/靠左/靠右,show-overflow-tooltip是指：当内容过长被隐藏是显示tooltip，width就是设置宽度<el-table-column label="序号" type="index" align="center" show-overflow-tooltip width="50"></el-table-column>//此列中的sortable prop都是为了属性排序    <el-table-column :label="'ID'" align="center" width="164px" :sortable="'custom'" prop="ID"><template slot-scope="scope"><span>{{ scope.row.id }}</span></template></el-table-column>
</el-table>//上方代码中的height,也就是表格的高度是通过页面自动计算出来的，在data中有说明。
data(){return{screenHeight: `${document.documentElement.clientHeight}` - 242,}
}//以下代码放在methods中
sortChange(column) {//打印看看参数有哪些？console.log('排序', column.prop, column.order);//排序默认是从第一页开始this.listQuery.page = 1;//排序的字段是属性名this.listQuery.param.sort = column.prop;//排序的方式是根据上下选择来确定this.listQuery.param.asc = (column.order == 'ascending' ? true : false);//此方法为获取数据的方法this.getPage();
},
getPage() {//表格加载中~this.listLoading = true;//调用Page接口，传递参数，page(this.listQuery).then(response => {this.list = response.result.data;this.total = response.result.total;//隐藏加载中~this.listLoading = false;});
}

elementui表格排序功能相关推荐

HTML列表内容自动排序,JS实现HTML表格排序功能
本文实例为大家分享了JavaScript实现HTML表格排序功能,供大家参考,具体内容如下 HTML代码: click me click me click me click me 15.43 700 ...
在Web页面实现表格排序功能：jQuery、Vue等思路分析
参考思路 01 jQuery <Jquery对Table表格排序(方法一)> https://blog.csdn.net/wdfscp/article/details/8373311 主要 ...
element-ui表格列排序错乱问题解决方案
文章目录一.基本代码二.问题三.解决方案一.基本代码在使用el-talble的时候可以加上sortable属性,使表格中的某一列具备排序的功能,点击表格title右侧的三角符号可以切换正序和 ...
element-ui表格sort-change排序，当table部分数据为空null时，解决排序不起作用/错乱/不整齐的问题（支持字符串，数字排序）
当表格排序列的数据出现空数据(null)的时候,组件自带的排序功能就不正常了,出现的问题如图: 排序生效,但不整齐,中间有空行. 思路一:重新排一个新数组:遍历表格data,使其含空的数据堆在一块,非 ...
html 表格过滤功能,简单的带排序和过滤功能的jQuery表格插件
smart-table是一款简单实用的带排序和过滤功能的jQuery表格插件.该jQuery表格插件通过简单的设置就可以生成表格排序.表格字段过滤功能,甚至可以实现表格分页显示,使用非常方便. 使用方 ...
SAP UI5 应用开发教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)功能试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)功能
本教程的上一个步骤,我们学习了如何基于 OData V4 开发一个最简单的使用了 Table(表格)控件的 SAP UI5 应用. SAP UI5 应用开发教程之六十二 - 基于 OData V4 的 ...
对datatable类型列名排序_表格数据的排序功能（支持多列）
官方排序组件说明介绍 [表格数据]- 排序 1.功能说明对 DataFrame 数据进行排序操作. 2.基本使用说明在"df"参数内传入 DataFrame 数据集,例如传入[ ...
element-UI：el-table 表格排序
element-UI:el-table 表格排序需求:el-table 需要支持排序,即点击当前列头实现排序. 最终实现效果: html 部分: 1.给el-table设置事件 @sort-chan ...

elementui表格排序功能

elementui表格排序功能相关推荐

最新文章

热门文章