element plus 的sortable排序问题

因为是默认方法,所以功能很差,我用了一下效果是这样的

“编码”只能实现从小到大排序

“时间”无法实现分页的基础上排序,也就是说只能单页从小到大排序,第二页的数据跟第一页的完全没有顺序关系

    <el-table-column prop="sa"   label="编码"   sortable/>
    <el-table-column prop="date" label="时间" sortable/>

希望有人帮我想一个方法解决上面的方法,最好是纯前端的方法vue3的。

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下:
Element Plus 的 el-table-column 组件提供了默认的排序功能,但是对于一些特殊的排序需求,可能需要自定义排序方法。在你的情况下,需要实现基于分页的排序功能,可以通过以下步骤实现:

  1. el-table-column 组件中设置 sortable 属性为 custom,启用自定义排序功能。

  2. el-table-column 组件中设置 sort-method 属性为一个自定义排序方法的函数名,用于实现分页排序功能。

下面是一个基于 Vue 3 和 Element Plus 的示例代码,可以实现基于分页的编码和时间排序:

<template>
  <el-table :data="tableData" :default-sort="{prop: 'id', order: 'ascending'}">
    <el-table-column prop="id" label="ID" sortable="custom" sort-method="sortById"/>
    <el-table-column prop="code" label="编码" sortable="custom" sort-method="sortByCode"/>
    <el-table-column prop="date" label="时间" sortable="custom" sort-method="sortByDate"/>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, code: 'A123', date: '2022-01-01' },
        { id: 2, code: 'B456', date: '2022-01-02' },
        { id: 3, code: 'C789', date: '2022-01-03' },
        { id: 4, code: 'D101', date: '2022-01-04' },
        { id: 5, code: 'E112', date: '2022-01-05' },
        { id: 6, code: 'F131', date: '2022-01-06' },
        { id: 7, code: 'G141', date: '2022-01-07' },
        { id: 8, code: 'H159', date: '2022-01-08' },
        { id: 9, code: 'I161', date: '2022-01-09' },
        { id: 10, code: 'J180', date: '2022-01-10' },
      ],
      currentPage: 1,
      pageSize: 3,
    };
  },
  methods: {
    sortById(data1, data2, sortType) {
      const sortOrder = sortType === 'ascending' ? 1 : -1;
      return sortOrder * (data1.id - data2.id);
    },
    sortByCode(data1, data2, sortType) {
      const sortOrder = sortType === 'ascending' ? 1 : -1;
      return sortOrder * data1.code.localeCompare(data2.code, 'zh');
    },
    sortByDate(data1, data2, sortType) {
      const sortOrder = sortType === 'ascending' ? 1 : -1;
      return sortOrder * (new Date(data1.date) - new Date(data2.date));
    },
  },
  computed: {
    sortedTableData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      const sortedData = this.tableData.sort(this.sortById);
      return sortedData.slice(startIndex, endIndex);
    },
  },
};
</script>

在这个示例中,我们在 el-table-column 组件中分别设置了 sortable 属性为 custom,并通过 sort-method 属性指定了对应的自定义排序方法。

sortById 方法中,我们简单地比较了两个数据的 id 属性,并根据排序类型返回升序或降序。在 sortByCode 方法中,我们使用了 localeCompare 方法来比较两个字符串,实现了中文排序功能。在 sortByDate 方法中,我们将日期字符串转换为 Date 类型,然后比较两个 Date 对象,实现了时间排序功能。

computed 计算属性中,我们通过 slice 方法实现了基于分页的数据展示。

希望这个示例代码可以帮助你解决问题。


如果以上回答对您有所帮助,点击一下采纳该答案~谢谢