element plus vue js pagination and table sort usage

Question

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?

Answer 1

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.

https://element-plus.org/en-US/component/table.html#sorting