对el-table只做升降排序，去除中间默认状态

最新推荐文章于 2023-07-04 17:29:30 发布

Love_Fish_Young

最新推荐文章于 2023-07-04 17:29:30 发布

阅读量678

点赞数

文章标签： elementui 前端 javascript vue.js

本文链接：https://blog.csdn.net/Love_Fish_Young/article/details/130507460

版权

概述

大家都知道 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>