<div class="table">
<el-table
:data="tableData"
borderstyle="width: 100%"
border
stripe
@sort-change="sortChange"
ref="table"
:height="tableHeight"
:header-cell-style="handleTheadStyle"
>
<el-table-column label="Ledger Amt" prop="amountLedger" min-width="100" align="center" sortable="amountLedger">
<template slot-scope="scope">
<span>{{scope.row.amountLedger | thousands}}</span>
</template>
</el-table-column>
props: {
mutilSort: {
default: true
},
},
data() {
return {
activeThead: {} //保存所选择的表头
}
}
reset() {
this.searchForm = {};
this.sortList = [];
this.$refs.table.clearSort();
for(let key in this.activeThead){
if(this.activeThead[key]){
this.activeThead[key].column.order = '';
this.activeThead[key].order = '';
this.activeThead
}
}
this.getTableData();
},
sortChange(column) {
let sidx = column.prop;
let order = column.order;
if(sidx == 'valueDate'){
sidx = 'valueDatetime'
}
if(column.order == 'descending'){
order = 'desc'
}else if(column.order == 'ascending'){
order = 'asc'
}else {
order = null
}
let sort = {[sidx]:order}
this.sortList.push(sort)
this.getTableData();
if (!this.mutilSort) return;
if (column.order) {
this.activeThead[column.prop] = {
column,
order:column.order
}
} else if (!column.order) {
this.activeThead[column.prop] = "";
}
},
handleTheadStyle({ row, column, rowIndex, columnIndex}) {
if (!this.mutilSort) return;
if (this.activeThead[column.property]) {
column.order = this.activeThead[column.property].order;
}
},