Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017-07-31 15:49
1616 查看
数据结构为数组中包含对象--树形结构,用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: "公共用电", 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代码
.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; }
总结
以上所述是小编给大家介绍的Vue组件模板形式实现对象数组数据循环为树形结构,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- vue中子组件向父组件传递数据的实例代码(实现加减功能)
- 看数据结构写代码(16)顺序队列的实现(循环队列)
- 数据结构之栈的初始化、创建、入栈、出栈、销毁-c++代码实现及运行实例结果
- php实现的树形结构数据存取类实例
- vue.js树形组件之删除双击增加分支实例代码
- mybatis实现读取树结构数据实例代码
- 数据结构之栈的初始化、创建、入栈、出栈、销毁-c++代码实现及运行实例结果
- vue.js开发实现全局调用的MessageBox组件实例代码
- Vue组件实例间的直接访问实现代码
- php实现的树形结构数据存取类实例
- 数据结构之栈的初始化、创建、入栈、出栈、销毁-c++代码实现及运行实例结果
- 【Tree 2】树形结构数据呈现的非递归算法(循环)实现
- 数据结构之栈的初始化、创建、入栈、出栈、销毁-c++代码实现及运行实例结果
- 数据结构之栈的初始化、创建、入栈、出栈、销毁-c++代码实现及运行实例结果
- vue+ElementUI实现订单页动态添加产品数据效果实例代码
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
- ReactJs实现树形结构的数据显示的组件的示例
- 【java基础 4】树形结构数据呈现的非递归算法(循环)实现
- 数据结构之栈的初始化、创建、入栈、出栈、销毁-c++代码实现及运行实例结果
- 基于vue实现swipe轮播组件实例代码