element plus vue js分页和表排序用法

brccelvz 于 2022-12-23 发布在 Vue.js

关注(0)|答案(1)|浏览(302)

我正在使用Vue js，元素加表和分页。表的所有列都是可排序的，但当我排序时，它只在一页中工作。我想排序我所有的数据，从下一页也。对于分页，我正在使用计算变量：

pagedTableData() {
    const data = this.tableData.slice(
        this.pageSize * this.page - this.pageSize,
            this.pageSize * this.page
        );
    return data;
}

我的表如下所示：

<el-table 
    :columns="this.columns"
    :data="this.pagedTableData"
    :key="this.tableKey"
    style="width: 100%"
    id="elTable">
<el-table>

如何使它不仅在一个页面排序，并获得我所有的数据？

vue.js

来源：https://stackoverflow.com/questions/74895874/element-plus-vue-js-pagination-and-table-sort-usage

1条答案

按热度按时间

kgsdhlau1#

Element plus'表组件为您提供了一种编写自定义排序方法的方法，
您需要为组件提供sort-change属性，该属性将调用一个方法，您可以在该方法中编写自定义排序逻辑，

<el-table ref="table" @sort-change="sortData">
  <!-- table columns and data here -->
</el-table>

在JS里，

methods: {
  handleSortChange(sort) {
    // sorting logic
  }
}

此外，您可能需要设置@current-page-change属性，以便在每次页面更改时执行此操作。
https://element-plus.org/en-US/component/table.html#sorting

赞(0）回复(0）举报 2022-12-23

我来回答

element plus vue js分页和表排序用法

1条答案

相关问题

热门标签

最新问答