带进度条的Tree

问题来由

工作上业务有个需求，树状图展示数据。这个好办，很多组件，插件都有数状图。比如Ant组件。但是想在tree的文字后面再做扩展却是很难。可以说基本办不到。

类似于这种树状图。ant基本已经写死了。那么办法只能自己整了。
自己手写的效果：

上代码

这个就不多说了，用li画就可以了，由于我这里规定好了只有三级目录，所以直接写死了。如果不确定有几级的话再想其他办法，用递归也可以的。

<ul class="treeMain">
                <li *ngFor="let item of treeData;let i=index"   >
                  <span class='icon-open' id="li-{{i}}" (click)="showChild($event)">{{item.name}}</span>
                  <ul *ngIf="item.value && item.value.length!==0 " class="changeNone">
                    <li *ngFor="let elm of item.value ;let j=index" >
                      <span class='icon-open' id="li-{{i}}-{{j}}" (click)="showChild($event)">{{elm.type}}</span> <span>({{elm.count}})</span>
                      <ul *ngIf="elm.data && elm.data.length!==0"  class="changeNone">
                        <li *ngFor="let elemt of elm.data;let k=index" >
                          <span class='icon-open' id="li-{{i}}-{{j}}-{{k}}" (click)="showChild($event)">{{elemt.key}}</span> 
                          <div class="jd-box" *ngIf="elemt.value&&elemt.value.indexOf('%')>-1">
                          <div  class="jd">
                            <div  id="fill" [ngStyle]="{'width': elemt.value}">&emsp;</div>
                              <div class="item" *ngFor="let item of jdLine;let i=index" [ngStyle]="{'left':4*(i+1)+'px'}"></div>
                            </div>
                            <span style="font-size: 12px;line-height: 34px;">{{elemt.value}}</span>
                          </div>  
                          <span *ngIf="elemt.value&&elemt.value.indexOf('%')===-1">({{elemt.value}})</span>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>

.treeMain ul {
    margin-left: 7px;
    border-left: 1px solid #ccc;
    
}
.treeMain span{
    width: 56px;
    height: 14px;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
    letter-spacing: 0px;
    color: #686868;
}
.treeMain ul li{
    margin-left: 8px;
}
.icon-open:before {
    margin-right: 11px;
}
.icon-close:before {
    margin-right: 11px;
}


.jd-box{
    display: inline;
}
.jd{
    width: 56px;
    height: 6px;
    margin: 0 8px;
    display: inline-block;
    background-color: rgb(199,199,199);
    /* display: flex; */
    border: 1px solid rgb(180,196,200);
    position: relative;
}

.jd  .item{
    z-index: 2;
    position: absolute;
    display: inline-block;
    width: 1px;
    height: 100%;
    background-color:#fff;
    /* margin-left: 3px; */
}
 #fill{
     position: absolute;
    /* width: 55%; */
        height: 100%;
    background-color: rgb(0,204,240);
}

 showChild(e) {
        console.log(e);
        let dom = document.getElementById(e.target.id);
        let className = e.target.className;
        if (className === 'icon-open') {
            dom.classList.replace("icon-open", "icon-close");
        } else {
            dom.classList.replace("icon-close", "icon-open");
        }
        console.log(dom.parentNode.children)
        let ulDom;
        for (let i = 0; i < dom.parentNode.children.length; i++) {
            if (dom.parentNode.children[i].tagName === "UL") {
                ulDom = dom.parentNode.children[i];
                break;
            }
        }
        console.log(ulDom, className);
        if (ulDom) {
            ulDom.removeAttribute('style');
            if (className === 'icon-open') {
                ulDom.setAttribute('style', 'display:block');
            } else {
                ulDom.setAttribute('style', 'display:none');
            }
        }
    }

单要进度条的话就拉取class为jd的部分就好了。
进度条的长度可以直接和百分比挂钩，用起来相对比较轻松。
不同的框架除了语法不同基本其他都一样的。实在不行用原生的也可以很快弄好。

最后再提供另一个进度条比较常规了，思路很简单。

 <div class="back-div">
     <div class="fill-div" [ngStyle]="{'width':bindWidth}"></div>
</div>

.back-div{
    margin: 0 5px;
    display: inline-block;
    width:  48%;
    height: 5px;
    border-radius: 5px;
    background-color: rgb(240,242,244);
}
.fill-div{
    height: 5px;
    border-radius: 5px;
}

绑定width就好了，width为百分比就OK。

简单好用哈…