Javascript

Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

本文主要是介绍Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
 

数据结构为数组中包含对象--树形结构，用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;     }
这篇关于Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航