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);//升序
    }
  }

降序：                                                                                                  升序：