<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;
函数在最后拿回来的数据在表单里面遍历，就是升序或者降序后的数据