【element-ui】element-ui表格分页以后，日期排序乱了，只是对当前页面排序，没有对整个数据排序

如题，表格没有分页前是按照日期顺序排序的，分页以后日期排序乱了，如下图
这是第一页
图片描述

这是第二页
图片描述

很显然，日期顺序乱了，只是在当前页面排序了，没有进行整个排序。
我的代码如下

<template>
  <div>
    ...
          <div>
            <el-table
              :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
              border
              style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}">
              <el-table-column
                prop="date"
                label="Modified Date"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="Experiment Name"
                width="180">
              </el-table-column>
              <el-table-column
                prop="content"
                label="Content"
                width="640">
              </el-table-column>
            </el-table>
            <br><br>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
              </el-pagination>
            </div>
            </div>
...
</template>
<script>
...
    export default{
      data() {
        return {
          tableData:[{
            date: '',
            name: '',
            content: ''
          }],
          currentPage: 1,
          pagesize:10
        }
      },
      mounted: function(){
        this.getAbHistory();
      },
      methods:{
        handleSizeChange(size) {
          this.pagesize = size;
        },
        handleCurrentChange(currentPage) {
          this.currentPage = currentPage;
        },
        getAbHistory(){
          axios.get("/historyScan/AbHistory").then(result =>{
            var res = result.data;
            if(res.status == "0"){
              let values = res.result.hbaseRst;
              var data = []
              for (let i = 0; i < values.length; i++){
                var obj = {}
                obj.name= values[i].key;
                obj.date = moment(values[i].timestamp).format("YYYY-MM-DD HH:mm:ss");
                obj.content = values[i].$;
                data[i] = obj
              }
              this.tableData = data;;
            }
            else{
              this.$message.error('错误，无法获取A/B test 历史记录');
            }
          });
        }
      }
    }
</script>

请大神指教一下，如何对整个数据进行排序，前端代码应该如何修改，谢谢

回答：

element table 排序有一个远程排序
sortable 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件
然后在后端进行全量数据排序，返回过来的值页面会进行再次排序

回答：

整体数据的排序还是交给后端吧，前端传参就可以了。
前端要搞这个的话，需要你把所有数据传过来才行，不然只能对已经有的数据排序(不建议这么做)。
具体怎么做已经有朋友回答了，我就不赘述了。

回答：

整个数据按时间排序？那是要传个标识告诉后端，再把数据返回吧。element的排序一版都是针对当前页数据的

回答：

分页的排序要后端来做

回答：

通过向el-table增加@sort-change事件，向el-table-column增加sortable='custom'属性，向methods实现sortChange方法，可以实现数据在前台分页后的全部数据排序（不止本页排序）。

<el-table            
:data="tableData.slice((pageIndex-)*pageSize,pageIndex*pageSize)"
@sort-change="sortChange">
......
<el-table-column prop="reserve" label="库存量" sortable='custom'></el-table-column>
......
sortChange(column) {
  this.pageIndex = 1; // 排序后返回第一页
  if (column.order === "descending") {
    this.tableData.sort((a, b) => b[column.prop] - a[column.prop]);
  } else if (column.order === "ascending") {
    this.tableData.sort((a, b) => a[column.prop] - b[column.prop]);
  }
}

以上是 【element-ui】element-ui表格分页以后，日期排序乱了，只是对当前页面排序，没有对整个数据排序 的全部内容， 来源链接： utcz.com/a/151305.html

回到顶部