Element UI 里的el-table表格排序

后台管理有时候会有排序的需求，如果只针对当前页进行排序，那么前端就可以实现排序，在对应需要排序的字段中，使用sortable字段即可，但是如果存在分页的情况，就只能排序展示页的内容，无法所有数据排序，这时候我们就要使用后端排序了。

一、给el-table设置事件 @sort-change="changeTableSort"

<el-table v-if='activate==4' :data="tableData.body"border@sort-change="changeTableSort">
</el-table>

二、给需要排序的表格设置属性 sortable="custom"

 <el-table-column align="center" label="总佣金金额" prop="commissionPrice"width='150' sortable="custom"></el-table-column>

三、声明 changeTableSort（）

   //排序changeTableSort(column){console.log(column)if(column.order=='descending'){this.sorting='desc'}else if(column.order=="ascending"){this.sorting='asc'}this.prop=column.propthis.getTableData4()},// 邀请明细接口getTableData4() {let params = {size: this.queryParams.size, //每页显示条数current: this.queryParams.current, //当前页userNo:this.$route.query.userNo,orderBy:this.prop,sortingRules:this.sorting}this.$api.customerAccountMgmt.inviteDetail(params).then(res => {if (res.code == 200) {this.tableData.loading = falselet resData = res.datathis.tableData.body = resData.recordsthis.total = resData.total;this.indexStartNum = ((this.queryParams.current) * this.size) - 1if (this.total > 0) {this.pagination = true} else {this.pagination = false}this.startRow = resData.startRow;this.endRow = resData.endRow;} else {this.common.messageTipCode(res, 'error');}})},

打印出的数据为

order：排序的方式 ascending == 升序 descending == 降序 null == 不排序

prop：排序的那个表格的字段名

我把我的接口传参贴出来，上面的代码可以结合此图进行理解。

可以根据打印出来的值，和后端让我们传给他的参数，进行处理，就能实现排序功能。

Element UI 里的el-table表格排序相关推荐

element ui 树形-懒加载-表格-多选勾选问题
element ui树形表格如下: 它的数据格式为:使用children字段来存放子级数据 tableData: [{id: 1,date: "2016-05-02",name: ...
vue element ui里的日期时间选择器中国标准时间转化为年月日时分秒
<el-date-pickerend-placeholder="结束日期"range-separator="至"start-placeholder=&qu ...
element UI 封装后的table表头（tooltip）文字提示
前提:table组件被封装了,且不想引入其他组件的情况下截图: 实现: 代码: html: <el-table stripe :data="table.data" styl ...
设置elment ui plus 的el table的边框线
:**代码设置类名,给奇偶行设置类名 const tableRowClassName = ({ rowIndex }) => {if (rowIndex % 2 === 0) {return ...
Vue Element-ui Table表格排序
一.表格中有时候会有排序的需求,如果只针对当前页进行排序,那么前端就可以实现排序,在对应需要排序的字段中,使用sortable字段即可. <el-table-columnprop="d ...
element ui el-dialog子组件放到表格中title一直居中
1.背景和问题背景:子组件放在表格column中,子组件有个button和el-dialog 问题:el-dialog弹窗一直居中,center样式设置为true也不行 2.解决方式原因:表格列默 ...
关于element ui popover无法在table显示的问题，
实质是它的v-model属性值需要唯一的一个值来绑定,在table时,可以考虑对数组设置个默认的布尔值转载于:https://www.cnblogs.com/alww/p/11340303.html
前端学习（3047）：vue+element今日头条管理-使用table表格组件
element ui里dialog关闭后清除验证条件
//vue<el-dialog title="编辑用户" :visible.sync="dialogFor ...

Element UI 里的el-table表格排序

Element UI 里的el-table表格排序相关推荐

最新文章

热门文章