element-ui table实现调用后端API排序功能
需求:数据表格<el-table> <el-table-column>增加排序功能可升序降序。步骤:1、在列中设置sortable属性即可实现以该列为基准的排序。(需要后端排序,需将sortable设置为custom)2、设置prop排序字段名称。<el-table-columnlabel="创建日期"align="center"min-width="120"sort
·
需求:数据表格<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()
}
}
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)