我是靠谱客的博主 炙热夏天,最近开发中收集的这篇文章主要介绍element-ui table实现调用后端API排序功能,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

需求:数据表格<el-table> <el-table-column>增加排序功能可升序降序。

步骤:

1、在列中设置sortable属性即可实现以该列为基准的排序。(需要后端排序,需将sortable设置为custom

2、设置prop排序字段名称。


<el-table-column
label="创建日期"
align="center"
min-width="120"
sortable="custom"
prop="xxx"
>
<template slot-scope="{row}">
<span>{{ row.xxx | formatDate("YYYY-MM-DD", '-') }}</span>
</template>
</el-table-column>

3、在 Table 上监听sort-change事件。


<el-table
ref="tableData"
v-loading="listLoading"
:data="Data.list"
border
style="width: 100%"
@sort-change="sortChange"
>

4、data 添加

data() {
return {
queryContent: {
sortPropertyName: '',//排序的字段名
sortType: '',//升降序类型
}
}
}

5、sort-change事件方法排序 {column,prop,order} 列数据|排序字段|排序方式

 methods: {
// 排序 {column,prop,order} 列数据|排序字段|排序方式
sortChange(column) {
this.queryContent.sortPropertyName = column.prop
this.queryContent.sortType = column.order
this.getList()
}
}

最后

以上就是炙热夏天为你收集整理的element-ui table实现调用后端API排序功能的全部内容,希望文章能够帮你解决element-ui table实现调用后端API排序功能所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(51)

评论列表共有 0 条评论

立即
投稿
返回
顶部