element ui 表格中的sortable属性只能实现当前页数据的排序,无法实现整张表全部数据的排序,所以需要采取自定义的排序方式重新触发接口,获取排序好的全部列表
Java后端的分页列表有这两个字段需要前端去传递:
el-table 上加上sort-change事件,当表格的排序条件发生变化的时候会触发该事件
@sort-change="onSortChange"
需要排序的列加上自定义的排序
sortable="custom"
:sort-orders="['ascending', 'descending']"
全部代码如下:
视图部分:
<el-table
border
v-loading="loading"
:data="fingerList"
@sort-change="onSortChange"
ref="fingerTable"
>
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="序号" type="index" width="55" align="center"/>
<el-table-column
label="备注"
align="center"
prop="notes"
sortable="custom"
:sort-orders="['ascending', 'descending']"/>
</el-table>
scripts部分:
export default {
data() {
// 记录表格数据
fingerList: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
// 排序的列表字段
orderByColumn: null,
// asc正序 desc倒序
isAsc: null
},
},
methods: {
// 点击排序
onSortChange(column) {
this.queryParams.orderByColumn = column.prop
this.queryParams.isAsc = column.order === "ascending" ? 'asc' : 'desc'
// 获取后台列表数据
this.getList()
},
// 重置按钮
resetQuery() {
this.queryParams.orderByColumn = null
this.queryParams.isAsc = null
// 清除列表排序
this.$refs.fingerTable.clearSort()
this.queryParams.pageNum = 1
this.getList()
},
}
}