vue升降排序按钮怎么实现？

Question

我现在要做这样一个效果：
点一下升序，再点一下降序，再点一下升序……如此循环下去！

现在碰到的难点：
例如有两个这样的组件，我点“价格”时候，“面积”就不需要排序了，如：

就卡在这，不知如何实现 求大神给个思路

子组件代码：

<div class="sortBtn" @click="sort()" :style="{color:color}">
    <span>{{title}}</span>
    <i class="el-icon-sort-up" v-if="ifShow == 'up'"></i>
    <i class="el-icon-sort-down" v-else-if="ifShow == 'down'"></i>
    <i class="el-icon-sort" v-else></i>
</div>
---------------------------
props:["title","color"],
data () {
    return {
        ifShow:null,
    }
},
methods:{
    sort(){
        this.ifShow = this.ifShow == 'up'?'down':'up';
        this.$emit('changeSort',this.ifShow);
    }
},

Answer 1

除了状态之外还需要一个索引，比如父组件定义一个对象

sortdata = {
 key: "", // 表示排序的对象，比如面积或者价格
 order: "" // 表示升序或者降序或者不排序
}

然后传入子组件，子组件需要同时判断key和order符合

Answer 2

el-table里面有这个功能，应该可以直接使用

Answer 3

https://element.eleme.cn/#/zh...