vue el-table自定义排序

<template>
  <div>
    <el-table :data="tableData" @sort-change="handleSortChange">
      <el-table-column prop="date" label="日期" sortable="custom"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2021-01-01', name: '张三' },
        { date: '2021-01-02', name: '李四' },
        { date: '2021-01-03', name: '王五' },
      ],
    };
  },
};
</script>
changeTableSort(column) {
      // 获取字段名称和排序类型
      var fieldName = column.prop
      var sortingType = column.order

      // 按照降序排序
      if (sortingType === 'descending') {
        this.tableData.sort((a, b) => {
          return new Date(b[fieldName]) - new Date(a[fieldName])
        })
      } else {
        // 按照升序排序
        this.tableData.sort((a, b) => {
          return new Date(a[fieldName]) - new Date(b[fieldName])
        })
      }
    }

你可能感兴趣的:(vue,vue.js,javascript,前端)