概述
大家都知道 el-table 排序存在升序、降序、默认不排序的状态。本次做项目时遇到了需要对表格进行排序的功能,要求排序时只对数据进行升序、降序排序,本次开发使用了 el-table 组件,且去除了中间默认不排序状态,本次排序功能是后端实现的,调用了 sort-change 事件,具体代码如下,希望对有需要的小伙伴有所帮助。
html
<el-table
:data="newTable" style="width: 100%"
ref="tabSort"
:default-sort="{ prop: 'tmd', order: 'descending' }"
@sort-change="changeTableSort"
:show-overflow-tooltip="true"
>
<el-table-column align="center" prop="date" label="序号" width="60" type="index">
</el-table-column>
<el-table-column align="center" prop="provinceName" label="省份" width="100">
</el-table-column>
<el-table-column align="right" prop="tmd" label="月率" width="150" sortable="custom">
</el-table-column>
<el-table-column align="right" prop="tyd" label="年率" width="150" sortable="custom">
</el-table-column>
</el-table>
JS
<script>
export default {
data() {
return {
order: 'ascending',
orderDirection: 'DESC', // 默认降序
orderBy: 'tmd' // 表格排序字段
}
},
methods: {
changeTableSort(row) {
if(this.orderBy != row.prop) {
row.column.order = 'descending';
let columns = this.$refs.tabSort.columns;
columns.forEach(item => {
if(item.property === this.orderBy) {
item.order = '';
}
})
}
this.orderBy = row.prop;
if (row.order == 'ascending') {
this.orderDirection = 'DESC'
this.order = 'ascending'
} else if (row.order == 'descending') {
this.orderDirection = 'DESC';
this.order = 'ascending';
} else {
if(this.order.indexOf('asc') != -1) {
this.orderDirection = 'ASC';
row.order = 'ascending';
}else{
this.orderDirection = 'DESC';
row.order = 'descending';
}
row.column.order = row.order;
}
if (row.order) {
this.getData() // 调接口获取数据
}
},
}
}
</script>