需求:数据表格<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()
}
}