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


Posted in Javascript onJuly 31, 2017

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

Javascript 相关文章推荐
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
javascript页面倒计时实例
Jul 25 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
理解javascript async的用法
Aug 22 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
Angular 容器部署的方法
Apr 17 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 #Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 #Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 #Javascript
详解React中的组件通信问题
Jul 31 #Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 #Javascript
Angular.js中数组操作的方法教程
Jul 31 #Javascript
BootStrap导航栏问题记录
Jul 31 #Javascript
You might like
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
Python 的AES加密与解密实现
2019/07/09 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
keras导入weights方式
2020/06/12 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
村官学习十八大感想
2014/01/15 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
干部个人考察材料
2014/12/24 职场文书
中标通知书格式
2015/04/17 职场文书