Vue js 2表排序

Question

我想通过使用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.我已经生成一个表，现在只是想知道如何对这个表进行排序。

Answer 1

如果要单击表头中显示的度量标准时对表格进行排序，请添加排序方法并使用@click进行绑定。

// ... 
methods: { 
    sort(metric) { 
    this.metricItem = this.metricItem.sort((item1, item2) => { 
     // change `>=` to `<` if you want to sort in descending order 
     return this.getData[item1][metric] >= this.getData[item2][metric]; 
    }); 
    }, 
} 
// ... 

查看完整演示here。