vue+elementUI表格排序事件

需求是點擊表頭使得對應列可以進行排序（降序/升序）

這是完整的文件夾：包含vue,js.css文件

<template>
    <div>
      <el-table
        class="tableTop"
        :data="tableData2"
        style="width: 100%"
        @sort-change="changeTableSort"
        :default-sort = "{prop: 'amount', order: 'descending'}">
        <el-table-column
          label="排名"
          type="index"
          header-align="left"
          align="left"
        >
        </el-table-column>
       
        <el-table-column
          prop="sname"
          label="店鋪名稱"
          header-align="left"
          align="left"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="amount"
          label="銷售金額"
          header-align="left"
          align="left"
          sortable
          :show-overflow-tooltip="true"
          >
          <template slot-scope="scope">
            {{scope.row.amount | formatNum}}
          </template>
        </el-table-column>
        <el-table-column
          prop="g_num"
          label="商品件數"
          header-align="left"
          align="left"
           :sortable="'custom'"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="m_num"
          label="購買人數"
          header-align="left"
          align="left"
          :sortable="'custom'"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{scope.row.m_num | formatNum}}
          </template>
        </el-table-column>
        <el-table-column
          prop="o_num"
          label="訂單數"
          header-align="left"
          align="left"
          :sortable="'custom'"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{scope.row.o_num | formatNum}}
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
  import TableTop2Js from './TableTop2.js'
  export default TableTop2Js
</script>

<style lang="scss" scoped>
@import "TableTop2";
</style>

js文件：

export default {
  name: "TableTop2",
  props:{
    tableData2:{
      type:Array,
      default:function () {
        return []
      }
    }
  },
  data(){
    return{
      list:[]
    }
  },
//   mounted() {
//     this.getDeviceTypes();
// },

  methods:{
  //   //初始化加載列表
  //   getDeviceTypes() {
  //     this.loading = true;

  //     //將“創建時間”轉換為所需的時間格式
  //     this.tableData.map(item => {
  //         item.createTime = this.$moment(item.createTime).format("YYYY-MM-DD HH:mm:ss");
  //     });

  //     this.loading = false;
  // },

// 監聽事件
    changeTableSort(column){
        console.log(column)
        //獲取字段名稱和排序類型
        var fieldName = column.prop;
        var sortingType = column.order;
        //如果字段名稱為“創建時間”，將“創建時間”轉換為時間戳，才能進行大小比較
        if(fieldName=="createTime"){
          this.tableData2.map(item => {
               item.createTime = this.$moment(item.createTime).valueOf();
          });
       }

      //按照降序排序
      if(sortingType == "descending"){
        this.tableData2 = this.tableData2.sort((a, b) => b[fieldName] - a[fieldName]);
    }
    //按照升序排序
      else{
          this.tableData2 = this.tableData2.sort((a, b) => a[fieldName] - b[fieldName]);
      }
      //如果字段名稱為“創建時間”，將時間戳格式的“創建時間”再轉換為時間格式
    //   if(fieldName=="createTime"){
    //     this.tableData.map(item => {
    //         item.createTime = this.$moment(item.createTime).format(
    //              "YYYY-MM-DD HH:mm:ss"
    //         );
    //     });
    // }
    
    console.log(this.tableData2);

      }

  }
};