el-table 多列排序（仅前端）

最新推荐文章于 2025-06-24 20:15:30 发布

wwwwait___

最新推荐文章于 2025-06-24 20:15:30 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/W________11/article/details/132312018

博客指出，在某些情况下，完成当前页数据的排序无需调用后端接口，可直接在前端实现。

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

有时候只需要完成对当前页数据的排序，其实完全不需要调用后端接口来排。

<template>
  <div>
    <el-table
      :data="tempData"
      style="width: 100%"
      height="500"
      stripe
      :header-cell-class-name="handleHeaderClass"
      @header-click="handleHeaderClick"
      @sort-change="handleTableSort"
      >
      <el-table-column v-for="item in columnList" :key="item.id"
        :prop="item.prop"
        :label="item.label"
        :sortable="item.sortable"
        :width="item.width">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      columnList: [
        { id: 1, prop: 'date', label: '日期', sortable: 'custom', width: '180' },
        { id: 2, prop: 'name', label: '姓名', sortable: 'custom', width: '180' },
        { id: 3, prop: 'age', label: '年龄', sortable: 'custom', width: '180' },
        { id: 4, prop: 'single', label: '单身', sortable: 'custom', width: '180' },
        { id: 5, prop: 'balance', label: '余额', sortable: 'custom' }
      ],
      tableData: [{
        date: '2023-05-01',
        name: 'xxx1',
        age: 26,
        single: '是',
        balance: 2000.1
      }, {
        date: '2023-05-01',
        name: 'xxx2',
        age: 18,
        single: '是',
        balance: 0
      }, {
        date: '2023-05-01',
        name: 'xxx3',
        age: 20,
        single: '否',
        balance: 1999
      }, {
        date: '2023-05-02',
        name: 'xxx4',
        age: 20,
        single: '否',
        balance: 2000
      }, {
        date: '2023-05-03',
        name: 'xxx4',
        age: 20,
        single: '是',
        balance: 2000.1
      }], // 原数据
      tempData: [], // 排序后的数据
      sortList: [] // 用于表格数据排序
    }
  },
  created () {
    this.tempData = Object.assign([], this.tableData)
  },
  methods: {
    // -----------------------------------------自定义函数-----------------------------------------------
    updateSortOrder (column) {
      // column.order 默认只能有一个不为 null，也就是说其它列的 order 改变时，原有的 order 会被置为 null
      // 所以用另一个字段 multiOrder 保存 order 状态
      column.multiOrder = column.order
      // 更新 sortList
      const index = this.sortList.findIndex(item => item.prop === column.property)
      if (index !== -1) {
        this.sortList.splice(index, 1)
      }
      if (column.order !== null) {
        this.sortList.push({ prop: column.property, order: column.order })
      }
      // sort
      this.sortTableData()
    },
    // 根据某一项比较
    compareData (prop, a, b, order) {
      const orderFactor = order === 'ascending' ? 1 : -1
      if (a[prop] < b[prop]) {
        return -1 * orderFactor
      }
      if (a[prop] > b[prop]) {
        return 1 * orderFactor
      }
      return 0
    },
    // 根据 sortList 对 data 进行排序
    sortTableData () {
      this.tempData = Object.assign([], this.tableData)
      this.tempData.sort((a, b) => {
        for (const item of this.sortList) {
          const tempResult = this.compareData(item.prop, a, b, item.order)
          if (tempResult) {
            return tempResult
          }
        }
        return 0
      })
    },
    // -----------------------------------------el-table 事件-----------------------------------------------
    // 点击表头
    // bug: 监听不到点击箭头
    handleHeaderClick (column) {
      // this.updateSortOrder(column)
    },
    // 点击箭头
    handleTableSort ({ column }) {
      this.updateSortOrder(column)
    },
    // 把 multiOrder 同步给 order
    handleHeaderClass ({ column }) {
      column.order = column.multiOrder
    }
  }
}
</script>

<style scoped>
</style>