el-table只显示降序进行排序
<template>
<div class="content">
<el-table
:data="tableData"
border
@sort-change="sortChange"
:default-sort="
sortTitle != 'date'
? { prop: sortTitle, order: 'descending' }
: { prop: 'date', order: 'descending' }
"
sort-orders="['ascending', 'descending', 'descending']"
ref="table"
>
<el-table-column
prop="date"
label="日期"
width="180"
align="center"
sortable="custom"
>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180"
align="center"
sortable="custom"
>
</el-table-column>
<el-table-column
prop="address"
label="地址"
align="center"
sortable="custom"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
sortTitle: "date",
};
},
mounted() {},
methods: {
sortChange({ column, prop }) {
if (this.sortTitle == prop) {
column.order = "descending";
} else {
this.sortTitle = prop;
this.$refs.table.columns.forEach((el) => {
if (el.property != prop) {
el.order = null;
}
});
column.order = "descending";
}
},
},
};
</script>
<style scoped>
.content .el-table {
width: 600px;
margin: 150px auto;
}
.content .el-table /deep/ .sort-caret.ascending {
display: none;
}
.content .el-table /deep/ .sort-caret.descending {
bottom: 10px;
}
</style>