从后台拿数据来排序

<el-table :data="tableData"  highlight-current-row v-loading="loading"  @sort-change='sortChange'>

<el-table-column type="index" width="60"></el-table-column>

<el-table-column prop="LogLevel" label="等级" sortable='custom'></el-table-column>

<el-table-column prop="System" label="系统" sortable='custom'></el-table-column>

<el-table-column prop="Account" label="用户" sortable='custom'></el-table-column>

<el-table-column prop="Date" label="日期" sortable='custom'></el-table-column>

<el-table-column prop="ResultCode" label="code" sortable='custom'></el-table-column>

<el-table-column label="操作" width="100">

<template slot-scope="scope">

<el-button type="text" @click="handleView(scope.$index,scope.row)">查看</el-button>

</template>

</el-table-column>

</el-table>

data() {

return {

tableData: [],

filters: {

begin: "",

end: ""

},

loading: false, // 加载动画

isPaging: true, //是否显示分页

pageIndex: 1, //当前页（必传）

pageSize: 10, //每页多少条

currentPage: 1, //当前显示第一几页

totalNumber: 1, //总条数

viewVisible: false, //是否弹出查看

delVisible: false,}

1.第一步：@sort-change='sortChange'给表单绑定一个事件  这个事件里面有三个参数

1.1给所有列添加一个属性sortable='custom'

　　

2.第二部：函数里面有三个参数  column 可以拿到表单里面所有数据

column 可以拿到所有数据

column.prop 可以拿到没一个表格的属性名

column.order 可以拿到表格的升序或者降序的属性

例如：

sortChange: function(column, prop, order) {

　　this.sidx=column.prop //判断具体拿到的是哪一列

if(column.order==="ascending"){

　　this.sort="asc";

}else{

　　this.sort="desc";

}

　　getList() 

}

补充

getList() {

let para = {

　　begin: this.filters.begin, //起始页码

　　end: this.filters.end,  //结束

　　page: this.pageIndex,  //页码

　　limit: this.pageSize,  //每页多少行

　　sidx:this.sidx, //哪一列的属性

　　sord:this.sort, //升序还是降序

};

this.loading = true;

apiGetLogList(para).then(res => {

console.log(res)

if (res.success) {

　　this.tableData = res.data;

　　this.totalNumber = res.count;

}

});

this.loading = false;

},

3.第三步：this.tableData = res.data;

函数在最后拿回来的数据在表单里面遍历，就是升序或者降序后的数据