Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
发布时间：2020-12-17 02:51:18 所属栏目：百科 来源：网络整理
导读：数据结构为数组中包含对象--树形结构，用Vue组件的写法实现以下的效果： 树形列表，缩进显示层级，第5级数据加底色，数据样式显色，点击展开折叠数据。本文为用Vue实现方式，另有一篇为用knockout.js的实现方法。 html代码 组件模板代码 JavaScript代码 0; }
|
数据结构为数组中包含对象--树形结构，用Vue组件的写法实现以下的效果：
树形列表，缩进显示层级，第5级数据加底色，数据样式显色，点击展开折叠数据。本文为用Vue实现方式，另有一篇为用knockout.js的实现方法。 html代码 组件模板代码 {{list.name}}
{{list.energyone}}
{{list.energytwo}}
{{list.energythree}}
%
%
JavaScript代码 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代码 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组件模板形式实现对象数组数据循环为树形结构。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
