I am using Vue js, Element Plus Table and Pagination. All columns of the table are sortable, but when I am sorting it works only in one page. I want to sort all of my data, from next pages too. For pagination I am using computed variable:
pagedTableData() {
const data = this.tableData.slice(
this.pageSize * this.page - this.pageSize,
this.pageSize * this.page
);
return data;
}
My table looks like this:
<el-table
:columns="this.columns"
:data="this.pagedTableData"
:key="this.tableKey"
style="width: 100%"
id="elTable">
<el-table>
How to make it sort not only in one page and get all of my data?
Element plus' table component provides you with a way to write a custom sort method,
You need to provide the sort-change attribute to your component, which will call a method where you can write your custom sort logic,
<el-table ref="table" @sort-change="sortData">
<!-- table columns and data here -->
</el-table>
And in JS,
methods: {
handleSortChange(sort) {
// sorting logic
}
}
Additionally, you may need to set up the @current-page-change attribute, to do this on every page change.