Vue组件模板形式实现对象数组数据循环为树形结构组件模板形式实现对象数组数据循环为树形结构(实例代实例代
码码)
数据结构为数组中包含对象–树形结构，用Vue组件的写法实现以下的效果：
树形列表，缩进显示层级，第5级数据加底色，数据样式显色，点击展开折叠数据。本文为用Vue实现方式，另有一篇为用
knockout.js的实现方法。
html代码
<div id="table-component-div">
<table-component v-for="item in data1" v-bind:list="item"></table-component>
</div>
组件模板代码
<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代码
/* 数据结构 */
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: "公共用电",
评论0