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: "公共用电",
            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  # 组件传数组  # vue递归实现树形组件  # Vue组件库ElementUI实现表格加载树形数据教程  # Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现  # vue用递归组件写树形控件的实例代码  # 用 Vue.js 递归组件实现可折叠的树形菜单(demo)  # Vue.js递归组件构建树形菜单  # vuejs使用递归组件实现树形目录的方法  # 基于 Vue 的树形选择组件的示例代码  # Vue组件tree实现树形菜单  # vue实现自定义树形组件的示例代码  # 数据结构  # 绑定  # 小编  # 在此  # 给大家  # 另有  # 所述  # 给我留言  # 感谢大家  # 组中  # 疑问请  # 有任何  # 暖通空调  # energythree  # energyone  # energytwo  # huanRatio  # isgreen  # isred  # number 

相关文章： 制作网站的基本流程,设计网站的软件是什么？  SAX解析器是什么，它与DOM在处理大型XML文件时有何不同？  图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf？  建站之星伪静态规则如何正确配置？  如何用AWS免费套餐快速搭建高效网站？  c++23 std::expected怎么用 c++优雅处理函数错误返回【详解】  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  如何通过建站之星自助学习解决操作问题？  文字头像制作网站推荐软件,醒图能自动配文字吗？  如何快速搭建高效WAP手机网站？  如何自定义建站之星模板颜色并下载新样式？  广东企业建站网站优化与SEO营销核心策略指南  小自动建站系统：AI智能生成+拖拽模板，多端适配一键搭建  如何在IIS服务器上快速部署高效网站？  常州自助建站工具推荐：低成本搭建与模板选择技巧  css网站制作参考文献有哪些,易聊怎么注册？  外汇网站制作流程,如何在工商银行网站上做外汇买卖？  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  小型网站制作HTML,*游戏网站怎么搭建？  测试制作网站有哪些,测试性取向的权威测试或者网站？  网站设计制作企业有哪些,抖音官网主页怎么设置？  如何挑选优质建站一级代理提升网站排名？  网站代码制作软件有哪些,如何生成自己网站的代码？  公司网站设计制作厂家,怎么创建自己的一个网站？  建站主机数据库如何配置才能提升网站性能？  赚钱网站制作软件,建一个网站怎样才能赚钱?是如何盈利的？  济南网站制作的价格,历城一职专官方网站？  ,怎么用自己头像做动态表情包？  建站之星在线客服如何快速接入解答？  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  实例解析angularjs的filter过滤器  金*站制作公司有哪些,金华教育集团官网？  如何高效配置IIS服务器搭建网站？  建站DNS解析失败？如何正确配置域名服务器？  网站制作的方法有哪些,如何将自己制作的网站发布到网上？  潮流网站制作头像软件下载,适合母子的网名有哪些？  建站之家VIP精选网站模板与SEO优化教程整合指南  济南企业网站制作公司,济南社保单位网上缴费步骤？  c# 在高并发下使用反射发射（Reflection.Emit）的性能  高防服务器租用首荐平台，企业级优惠套餐快速部署  杭州银行网站设计制作流程,杭州银行怎么开通认证方式？  香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南  如何在阿里云香港服务器快速搭建网站？  制作网页的网站有哪些,电脑上怎么做网页？  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  网站制作的软件有哪些,制作微信公众号除了秀米还有哪些比较好用的平台？  c# 在ASP.NET Core中管理和取消后台任务  视频网站app制作软件,有什么好的视频聊天网站或者软件？  如何在IIS7中新建站点？详细步骤解析