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

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

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

html代码

组件模板代码

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组件模板形式实现对象数组数据循环为树形结构，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！