数据结构为数组中包含对象--树形结构，用Vue组件的写法实现以下的效果：
树形列表，缩进显示层级，第5级数据加底色，数据样式显色，点击展开折叠数据。本文为用Vue实现方式，另有一篇为用knockout.js的实现方法。
html代码
| 1 2 3 |
<div id="table-component-div">
<table-component v-for="item in data1" v-bind:list="item"></table-component>
</div>
|
组件模板代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type="text/x-template" id="table-component-template">
<div class="tem">
<div class="tem-p">
<div v-on:click="toggleClick"><i v-bind:style="{'visibility':list.number!=0?'visible':'hidden'}">{{list.number}}</i><span>{{list.name}}</span></div>
<!--绑定数据-->
<div><span>{{list.energyone}}</span></div>
<div><span>{{list.energytwo}}</span></div>
<div><span>{{list.energythree}}</span></div>
<!--绑定class，使数值显示出区分-->
<div><span v-bind:class="{'isgreen':list.huanRatio<0,'isred':list.huanRatio>100}">{{list.huanRatio}}<em>%</em></span></div>
<div><span v-bind:class="{'isgreen':list.tongRatio<0,'isred':list.tongRatio>100}">{{list.tongRatio}}<em>%</em></span></div>
</div>
<div class="tem-c">
<!-- 子组件 -->
<table-component v-for="itemc in list.child" :list="itemc"></table-component>
</div>
</div>
</script>
|
JavaScript代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
/* 数据结构 */
var ko_vue_data=[
{
name: "总能耗",
number:"0",
energyone: 14410,
energytwo: 1230,
energythree: 1230,
huanRatio: -36.8,
tongRatio: 148.5,
child: [
{
name: "租户电耗",
number:"1",
energyone: 14410,
energytwo: 1230,
energythree: 1230,
huanRatio: -36.8,
tongRatio: 148.5,
child: []
},
{
name: "公共用电",
number:"2",
energyone: 14410,
energytwo: 1230,
energythree: 1230,
huanRatio: -36.8,
tongRatio: 148.5,
child: [
{
name: "暖通空调",
number:"2.1",
energyone: 14410,
energytwo: 1230,
energythree: 1230,
huanRatio: -36.8,
tongRatio: 148.5,
child: [
{
name: "冷站",
number:"2.1.1",
energyone: 14410,
energytwo: 1230,
energythree: 1230,
huanRatio: -36.8,
tongRatio: 148.5,
child: [
{
name: "冷水机组",
number:"2.1.1.1",
energyone: 14410,
energytwo: 1230,
energythree: 1230,
huanRatio: -36.8,
tongRatio: 148.5,
child: []
}
]
},
{
name: "热力站",
number: "2.1.2",
energyone: 14410,
energytwo: 1230,
energythree: 1230,
huanRatio: -36.8,
tongRatio: 148.5,
child: []
}
]
}
]
}
]
}
];
/* 注册组件 */
Vue.component('table-component', {
template:"#table-component-template",//模板
props:['list'],//传递数据
computed:{//计算属性
isFolder: function () {//判断数据有没有子集，此效果中暂没用到，有需要的可以看下具体使用方式
return this.list.child && this.list.child.length > 0;
}
},
methods:{
/* 展开折叠操作 */
toggleClick:function(event){
event.stopPropagation();//阻止冒泡
var _this = $(event.currentTarget);//点击的对象
if (_this.parent().next().is(":visible")) {
_this.parent().next().slideUp();
} else {
_this.parent().next().slideDown();
}
}
}
});
/* 创建实例 */
new Vue({
el:"#table-component-div",//挂载dom
data:{
data1:ko_vue_data//数据
}
})
|
数据显示完毕，接下来是样式效果，缩进显示层级及底色显示。
css代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
.tem-p{
clear: both;
border-bottom: 1px solid #dddddd;
height: 30px;
line-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tem-p>div{
float: left;
width:100px;
box-sizing: border-box;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space:nowrap;
overflow: hidden;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
border-right: 1px solid #dddddd;
}
.tem-p>div:first-of-type{
width: 298px;
text-align: left;
}
.tem>.tem-c .tem-p>div:first-of-type{
padding-left: 30px;
}
.tem>.tem-c .tem-c .tem-p>div:first-of-type{
padding-left: 60px;
}
.tem>.tem-c .tem-c .tem-c .tem-p>div:first-of-type{
padding-left: 90px;
}
.tem>.tem-c .tem-c .tem-c .tem-c .tem-p>div:first-of-type{
padding-left: 120px;
}
.tem>.tem-c .tem-c .tem-c .tem-c .tem-p{
background-color: #f8f8f8;
}
.tem>.tem-c .tem-c .tem-c .tem-c .tem-c .tem-p>div:first-of-type{
padding-left: 150px;
}
.lastChild{
background: #f8f8f8;
}
.isred{
color: red;
}
.isgreen{
color: green;
}
|