Vue组件模板形式如何实现对象数组数据循环为树形结构

这篇文章主要介绍Vue组件模板形式如何实现对象数组数据循环为树形结构，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

我们提供的服务有：成都网站制作、成都网站设计、微信公众号开发、网站优化、网站认证、湖州ssl等。为上1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的湖州网站制作公司

数据结构为数组中包含对象--树形结构，用Vue组件的写法实现以下的效果：

树形列表，缩进显示层级，第5级数据加底色，数据样式显色，点击展开折叠数据。本文为用Vue实现方式，另有一篇为用knockout.js的实现方法。

html代码

组件模板代码


  
    
      {{list.number}}{{list.name}}

100}">{{list.huanRatio}}%

100}">{{list.tongRatio}}%

/* 数据结构 */ 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//数据 } })

.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组件模板形式如何实现对象数组数据循环为树形结构

其他资讯