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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
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图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
Javascript 面向对象 重载
2010/05/13 Javascript
js常用代码段收集
2011/10/28 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
浅谈js中的bind
2019/03/18 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
使用graphics.py实现2048小游戏
2015/03/10 Python
Python实现LRU算法的2种方法
2015/06/24 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
Python字节单位转换实例
2019/12/05 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
高中生家长寄语大全
2014/04/03 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
小学生倡议书范文
2014/05/13 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
人事任命书范本
2015/09/21 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
Python实现拼音转换
2021/06/07 Python