Vue之功能全面的表格（四）表格数据的排序和分页

本文详细介绍如何在前端使用Element UI框架实现表格数据的排序和分页功能，包括监听排序变化、自定义排序方法、计算属性实现排序逻辑、创建分页组件及响应分页事件，适用于复杂的数据展示需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

数据排序

1、为表格设置排序情况变化的监听事件，修改表格数据源为排序后的数据

<!-- 表格区 -->
<el-table :data="sortedData" @sort-change="sortChange">
...
</el-table>

  data () {
    return {
      ...
      sortProp: '',  // 新增
      sortOrder: ''  // 新增
    }
  },
  methods: {
    ...
    sortChange (column) {   // 新增
      this.sortProp = column.prop
      this.sortOrder = column.order
    }
  }

2、为排序的列设置排序方法为自定义（由于后续需要分页，必须设置为自定义）

 <el-table-column label="学习书籍" prop="name" sortable="custom"></el-table-column>
 <el-table-column label="作者" prop="author" sortable="custom">
   <template slot-scope="scope">
     {{ scope.row.author.join(',') }}
   </template>
 </el-table-column>

 <el-table-column label="学习计划状态" prop="status" sortable="custom">
   <template slot-scope="scope">
     <el-tag :type="statusColors[scope.row.status ]">{{ statuses[scope.row.status ]}}</el-tag>
   </template>
 </el-table-column>

 <el-table-column label="学习完成时间" prop="completeDate" sortable="custom">
   <template slot-scope="scope">
     {{ new Date(scope.row.completeDate).toLocaleString()}}
   </template>
 </el-table-column>

3、添加计算属性sortedData实现排序

   computed: {
    filtedData () {
      return this.data.filter((item) => {
        var reg = new RegExp(this.searchStr, 'i')
        return !this.searchStr || reg.test(item.name) || reg.test(item.author.join(' '))
      }).filter((item) => {
        return this.filterType === '' || item.status === this.filterType
      }).filter((item) => {
        return !this.filterDates || (this.filterDates[0] <= new Date(item.completeDate) && this.filterDates[1] >= new Date(item.completeDate))
      })
    },
    sortedData () {
      if (!this.sortOrder || !this.sortProp || !this.filtedData || !this.filtedData.length) return this.filtedData
      var reverse = this.sortOrder === 'descending' ? -1 : 1
      switch (typeof this.filtedData[0][this.sortProp]) {
        case 'number':
          return this.filtedData.sort((a, b) => {
            return reverse * (a[this.sortProp] - b[this.sortProp])
          })
        case 'string':
          if (JSON.stringify(new Date(this.filtedData[0][this.sortProp])) !== 'null') {
            return this.filtedData.sort((a, b) => {
              return reverse * (new Date(a[this.sortProp] - new Date(b[this.sortProp])))
            })
          } else {
            return this.filtedData.sort((a, b) => {
              var cmp = 0
              if (a[this.sortProp] > b[this.sortProp]) cmp = 1
              else if (a[this.sortProp] < b[this.sortProp]) cmp = -1
              return reverse * cmp
            })
          }
      }
    }
  }

4、排序效果如下
在这里插入图片描述

表格分页

5、创建分页工具条，需要设置的属性较多，依次为数据总条数，当前页，每页显示条数，可选择的每页显示条数，显示内容，每页显示条数改变事件，当前页改变事件

<el-pagination :total="total" :current-page="currentPage" :page-size="currentPageSize" :page-sizes="[3, 5]"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="pageSizeChange" @current-change="pageChange">
</el-pagination>

6、表格数据源修改为计算属性pagedData

<el-table :data="pagedData" @sort-change="sortChange">
...
</el-table>

7、新增当前页和每页显示条数属性和其变化时的事件方法

data() {
    return {
        //...
        currentPage: 1,
        currentPageSize: 3
    }
},
methods: {
    //...
    pageSizeChange(size) {
        this.currentPageSize = size
    },
    pageChange(page) {
        this.currentPage = page
    }
},

8、新增计算属性

computed: {
    ...
    total() {
        return this.filtedData.length
    },
    pagedData() {
        return this.sortedData.slice((this.currentPage - 1) * this.currentPageSize, this.currentPage * this.currentPageSize)
    }
}