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);

      }

  }
};

　　

 

原文地址：https://www.cnblogs.com/shiraly/p/12402295.html