需求是点击表头使得对应列可以进行排序(降序/升序)
这是完整的文件夹:包含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); } } };