zoukankan      html  css  js  c++  java
  • 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="{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);//升序
    }
    }
    降序:                                                                                                  升序:
                                                           
    --

  • 相关阅读:
    JAVA基础之(十三)“集合”
    JAVA基础之(十二)“泛型”
    JAVA基础之(五)”继承“
    算法--验证时间段不交叉/不重复的方法
    工具类--常量类
    工具--常见eclipse配置导入web工程(tomcat容器)步骤
    jar包--POI.jar包使用问题汇总
    java中常忽视的小问题
    ResultSetMetaData
    PreparedStatement
  • 原文地址:https://www.cnblogs.com/xiaocaiyuxiaoniao/p/10725340.html
Copyright © 2011-2022 走看看