概述
需求:数据表格<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排序功能所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复