先看效果图:

HTML部分

<div>
     <el-button @click="toggleSort('money', false)" type="primary">从小到大</el-button>
     <el-button @click="toggleSort('money', true)" type="primary">从大到小</el-button>
     <div v-for="item in testpage2"></div>
     <div v-for="item in sortList">{{ item.num }}</div>
</div>

通过toggleSort点击事件并传递参数来控制排序

 

JS部分

export default {
        data(){
            return{
                sortList:[{num:'5'},{num:'88'},{num:'43'},{num:'56'},{num:'28'},{num:'61'},{num:'9'}],
                d_sort:'',       //默认不排序
                newSort:false,//默认小大到大排列
            }
        },
        computed:{
            //排序
            testpage2: function(){
                var _this = this;
                var arrByZM = []; //声明新的数组用来存储排序的数据
                if(_this.d_sort != ''){
                    _this.sortList.sort(function( a , b){
                         if(_this.newSort){
                              return b.num - a.num;
                         }else{
                              return a.num - b.num;
                         }
                    });
                }
                //返回排序后的数据
                return arrByZM;
            },
        },
        methods:{
            //排序
            toggleSort(d_sort,newSort){
                this.d_sort = d_sort;
                this.newSort = newSort;
            },
        }
}

通过computed计算属性来监听排序的变化,并返回最新的排序数组

至此排序完成,以上是完整的排序方法

Logo

前往低代码交流专区

更多推荐