Vue.js 2表格排序

我正在尝试使用Vue.js 2创建一个可排序的表。我已经生成了一个表，现在只是想知道如何对这个表进行排序。

请看下面我的代码：

        <thead>
        <tr>
            <th class="table-header">Metric</th>
            <th class="table-header" v-for="metric in metricList"><a href="#">{{metric}}</a></th>
        </tr>
    </thead>
    <tbody>
        <template v-for="item in metricItem">
            <tr>
                <td class="table-cell" style="font-weight:bold"> {{ item }}</td>
                <template v-for="metric in metricList">
                    <td class="table-cell">
                        {{getData[item][metric]}}
                    </td>
                </template>
            </tr>
        </template>
    </tbody>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
    name: 'scores',

    data(){
        return {
            metricList : ["Current", "Min", "Avg", "Max"],

            metricItem : [
                'Happiness Score',
                'Sadness Score'
            ]
        }
    },


    computed: {
        ...mapGetters ([
            'getData', //getter to get data
        ])
    }
}
</script>

数据集是这样的：

getData {

    Happiness Score {

        Min : 62,
        Max : 154,
        Avg : 103
        Current : 100

    },

    Sadness Score {

        Min : 66,
        Max : 54,
        Avg : 73
        Current : 45

    },

}

我正在尝试使用Vue js 2创建一个可排序的表。我已经生成了一个表，现在只是想知道如何对这个表进行排序。

转载请注明出处:http://www.shenkehuoyun.com/article/20230526/2613552.html

➤