Element UI设置列表时间倒序/正序排序展示

在Element UI中，可以使用<el-table>组件来展示数据列表，并利用sortable属性来实现列的排序功能。你可以通过监听sort-change事件来处理排序，并更新数据的显示顺序。

以下是一个简单的例子，展示了如何设置列表的时间倒序/正序排序显示：

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @sort-change="handleSortChange">
      <el-table-column
        prop="date"
        label="日期"
        sortable="custom"
        width="180">
      </el-table-column>
      <!-- 其他列 -->
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2021-05-03',
          // 其他数据
        },
        {
          date: '2021-04-01',
          // 其他数据
        },
        // 更多数据...
      ],
      currentSort:{
        prop:'date',
        order:'ascending' // 默认升序
      }
    };
  },
  methods: {
    handleSortChange({ prop, order }) {
      this.currentSort = { prop, order };
      this.tableData.sort((a, b) => {
        let diff = Date.parse(a[prop]) - Date.parse(b[prop]);
        if (order === 'ascending') {
          return diff; // 正序
        } else {
          return -diff; // 倒序
        }
      });
    }
  }
};
</script>

在这个例子中，我们定义了一个currentSort对象来跟踪当前的排序状态。handleSortChange方法会在排序发生变化时被调用，并根据当前的排序条件对tableData进行排序。注意，Date.parse函数可以将日期字符串转换为毫秒时间戳，便于比较大小。

你可以根据需要调整tableData和currentSort的初始化，以及排序逻辑。