一、前言

我在vue項目中遇到了一個表格排序的需求，根據某一項的值的大小從大到小調整數組順序。

二、代碼

表格大概是這個樣子，樣式和圖片在代碼中簡化了。

<table class="recommend_table" cellspacing="0">
    <tr>
        <th>股票</th>
        <th @click="sort(‘in_price‘)">入選價</th>
        <th @click="sort(‘now_price‘)">最新價</th>
        <th @click="sort(‘increase‘)">模擬漲跌幅</th>
    </tr>
    <tr v-for="(item,index) in recommendlist" :key="index">
        <td>
            <div class="recommend_name">{{item.name}}</div>
            <div class="recommend_num">{{item.bn}}</div>
        </td>
        <td>{{item.in_price}}</td>
        <td>{{item.now_price}}</td>
        <td>{{item.increase}}%</td>
    </tr>
</table>

<script type="text/ecmascript-6">
    export default {
        data(){
            return{
                recommendlist: [
                    { name:‘高科石化‘, bn:‘002778‘, in_price: 20.68, now_price: 28.68, increase: 10.01 },
                    { name:‘中孚信息‘, bn:‘300659‘, in_price: 19.46, now_price: 17.46, increase: 9.06 },
                    { name:‘永福股份‘, bn:‘300712‘, in_price: 17.68, now_price: 32.68, increase: 2.01 }
                ],
                sortType: ‘in_price‘
            }
        },
        methods: {
            sort(type) {
                this.sortType = type;
                this.recommendlist.sort(this.compare(type));
                // switch(type){
                    // case ‘in_price‘:
                    //     this.sortType = ‘in_price‘;
                    //     this.recommendlist.sort(this.compare(‘in_price‘));
                    //     break;
                    // case ‘now_price‘:
                    //     this.sortType = ‘now_price‘;
                    //     this.recommendlist.sort(this.compare(‘now_price‘));
                    //     break;
                    // case ‘increase‘:
                    //     this.sortType = ‘increase‘;
                    //     this.recommendlist.sort(this.compare(‘increase‘));
                    //     break;
                // }
            },
            compare(attr) {
                return function(a,b){
                    var val1 = a[attr];
                    var val2 = b[attr];
                    return val2 - val1;
                }
            }
        }
    }
</script>
 

1. 排序方法

這裏用到的是數組的sort方法，這個方法有一個需要註意的地方，就是不傳參數的話，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。這並不是我們想要的排序方法，所以必須要傳參。

sort方法的參數是一個函數，這個函數提供了一個比較方法，要比較兩個值，然後返回一個用於說明這兩個值的相對順序的數字。

• 若 a 小於 b，在排序後的數組中 a 應該出現在 b 之前，則返回一個小於 0 的值。
• 若 a 等於 b，則返回 0。
• 若 a 大於 b，則返回一個大於 0 的值。

compare(key) {
    return function(a,b){
        var val1 = a[key];
        var val2 = b[key];
        return val2 - val1;
    }
}
 

在代碼中，compare函數中的匿名函數就是這樣一個函數，但這個函數外面又嵌套了一層，這是因為需要根據數組中的某一項來排序，所以需要把這一項的key值傳進來。

2. 調用排序方法

sort(type) {
    this.sortType = type;
    this.recommendlist.sort(this.compare(type));
    
    // 註釋部分
    switch(type){
        case ‘in_price‘:
            this.sortType = ‘in_price‘;
            this.recommendlist.sort(this.compare(‘in_price‘));
            break;
        case ‘now_price‘:
            this.sortType = ‘now_price‘;
            this.recommendlist.sort(this.compare(‘now_price‘));
            break;
        case ‘increase‘:
            this.sortType = ‘increase‘;
            this.recommendlist.sort(this.compare(‘increase‘));
            break;
    }
        
}
 

一開始我按照註釋的部分寫的，和我一樣抽象能力不是特別好的人首先會想到要這樣寫，但是寫出來之後發現三種情況不過是重復的代碼，這時我就直接用最上面兩行代碼來代替，寫完以後感覺內心一片平和。這種復用率高的代碼簡直讓人太舒服了。

三、結語

雖然是一個簡單的功能，但是非常值得歸納總結一下。

來源：https://segmentfault.com/a/1190000016199017

vue 根據數組中某一項的值進行排序