2021-12-14_144430.png

需求，如图 ↑
1.通过点击按钮，实现表格展示相应的数据，点车牌展示车牌数据。
2.再次点击车牌，则根据车牌切换排序，点击其它同理

效果

Video_2021-12-14_142851_edit.gif

核心代码及说明
1.需要el-table sort排序的隐藏方法 this.$refs.refTable.sort
2.通过打印可以看到这个sort(prop, t)方法接收两个参数, el-table-column 的prop值 及 排列方法t（ascending升序，descending降序， null 取消排序）
3.以下为点击按钮运行的函数 tag值为按钮下标

//tagColumn 为相应列的ref值
handleRange(tag) { //更新列表展示内空及排列顺序
    this.showContent = tag
    const index = tag -1
    let orders = this.$refs.tagColumn.sortOrders
    let column = this.$refs.tagColumn
    const list = ["total_price", "supplier.name", "total_price", "create_time"]
    orders.push(orders[0])
    orders.splice(0, 1)
    const order = orders[0]
    const prop = list[index]
    this.$refs.refTable.sort(prop, order)
},

<div class="text-center pb-4 border-bottom">
    <el-button-group>
        <el-button 
            type="info" 
            size="mini" 
            icon="el-icon-c-scale-to-original" 
            :style="showContent == 1 ? styles.activeButton : ''"
            @click="handleRange(1)">车牌</el-button>
        <el-button 
            type="info" 
            size="mini" 
            icon="el-icon-school" 
            :style="showContent == 2 ? styles.activeButton : ''"
            @click="handleRange(2)">供应商</el-button>
        <el-button 
            type="info" 
            size="mini" 
            icon="el-icon-price-tag" 
            :style="showContent == 3 ? styles.activeButton : ''"
            @click="handleRange(3)">金额</el-button>
        <el-button 
            type="info" 
            size="mini" 
            icon="el-icon-watch" 
            :style="showContent == 4 ? styles.activeButton : ''"
            @click="handleRange(4)">时间</el-button>
    </el-button-group>
</div>
<el-table 
    ref="refTable" 
    stripe row-key="id" 
    :max-width="torem(375)" 
    @row-click="handleExpandRow"
    :default-sort = "sortObj"
    :expand-row-keys="expands" :data="supData">
    <template slot="empty">
        <div class="grey-l3 height100 absolute-tl width100">
            暂无订单
        </div>
    </template>
    <el-table-column class-name="goods-name" prop="goods_name" label="商品" :width="torem(140)">
    </el-table-column>
    <el-table-column 
        ref="tagColumn" 
        v-if="showContent == 1" 
        class-name="commission" 
        align='center' 
        prop="total_price" 
        label="车牌"
        sortable
        :width="torem(90)">
        <template slot-scope="scope">
            <span :class="orderState(scope.row)">{{scope.row.platenum1+scope.row.platenum2}}</span>
        </template>
    </el-table-column>
    <el-table-column 
        ref="tagColumn" 
        v-if="showContent == 2" 
        class-name="commission" 
        align='center' 
        prop="supplier.name" 
        label="供应商"
        sortable
        :width="torem(90)">
        <template slot-scope="scope">
            <span :class="orderState(scope.row)">{{scope.row.supplier.name}}</span>
        </template>
    </el-table-column>
    <el-table-column 
        ref="tagColumn" 
        v-if="showContent == 3" 
        class-name="commission" 
        align='center' 
        prop="total_price" 
        label="金额"
        sortable
        :width="torem(90)">
        <template slot-scope="scope">
            <span :class="orderState(scope.row)">{{scope.row.total_price}}</span>
        </template>
    </el-table-column>
    <el-table-column 
        ref="tagColumn" 
        v-if="showContent == 4" 
        class-name="commission" 
        align='center' 
        prop="create_time" 
        label="时间"
        sortable
        :width="torem(90)">
        <template slot-scope="scope">
            <span :class="orderState(scope.row)">{{scope.row.create_time}}</span>
        </template>
    </el-table-column>
    <el-table-column align='center' label="操作" :width="torem(120)">
        <template slot-scope="scope">
            <el-button type="warning" size="mini"
                v-if="handleStatus(scope.row)"
                @click.stop="handleChangeOrder(scope.row)">{{btnText(scope.row)}}</el-button>
            <el-tag type="success" plain size="mini" v-else>{{tagText(scope.row.progress)}}</el-tag>
        </template>
    </el-table-column>
</el-table>