vue + elementUI table sorting event

Click on demand so that the header of the corresponding column may be (descending / ascending)

This is the complete folder: Contains vue, js.css file

<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 file:

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

  methods:{
  // // Initialize load the list
  //   getDeviceTypes() {
  //     this.loading = true;

  // // The "Created" converted to the required time format
  //     this.tableData.map(item => {
  //         item.createTime = this.$moment(item.createTime).format("YYYY-MM-DD HH:mm:ss");
  //     });

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

// listen for events
    changeTableSort(column){
        console.log(column)
        // get the field name and type of sorting
        var fieldName = column.prop;
        var sortingType = column.order;
        // If you compare the size of the field name "creation time", the "Created" to a timestamp, as can be
        if(fieldName=="createTime"){
          this.tableData2.map(item => {
               item.createTime = this.$moment(item.createTime).valueOf();
          });
       }

      // sorted in descending order
      if(sortingType == "descending"){
        this.tableData2 = this.tableData2.sort((a, b) => b[fieldName] - a[fieldName]);
    }
    // sorted in ascending order
      else{
          this.tableData2 = this.tableData2.sort((a, b) => a[fieldName] - b[fieldName]);
      }
      // If the field name "creation time", the time stamp format of "creation time" and then converted to time format
    //   if(fieldName=="createTime"){
    //     this.tableData.map(item => {
    //         item.createTime = this.$moment(item.createTime).format(
    //              "YYYY-MM-DD HH:mm:ss"
    //         );
    //     });
    // }
    
    console.log(this.tableData2);

      }

  }
};