vue 升降排序

本实例是根据工作进度的百分比来进行排序。

html

<div class="ibox-content">
<li v-for="(rangeItem,index) in range" :key="index" class="rankLi">
<span class="rankSpan">{{index+1}}</span>
<a class="rankA">{{rangeItem.name}}</a>
<div class="progress progress-striped active">
<div class="progress-bar" :style="{width:rangeItem.percent+'%'}"
aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar">
<span class="sr-only"></span>
</div>
</div>
<span class="proPercent">{{rangeItem.percent}}%</span>
</li>
</div>
script

export default {
name: "TP300", //组件的名称
data() {
return {
rangeList: [
{ name: "TP001", percent: "75" },
{ name: "TP002", percent: "30" },
{ name: "TP003", percent: "20" },
{ name: "TP004", percent: "15" },
{ name: "TP005", percent: "80" },
{ name: "TP006", percent: "35" },
{ name: "TP007", percent: "49" },
{ name: "TP008", percent: "46" }
]
};
},
computed: {
range: function() {
// return this.rangeList.sort((a,b)=>a.percent<b.percent);//降序,此方法在数据量多的时候会乱序，不明其理
return this.rangeList.sort((a, b) => a.percent - b.percent).reverse()//结合reverse(),成功实现降序排列
computed: {
range: function() {
return this.rangeList.sort((a,b)=>a.percent-b.percent);//升序
}
}
降序：                                                                                                  升序：
                                                       
--