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

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.http://child && this.list.child.length > 0;

}

},

methods:{

/* 展开折叠操作 */

toggleClick:function(event){

event.stopPropagation();//阻止冒泡

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。