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内容请搜索靠谱客的其他文章。