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

前端之家收集整理的这篇文章主要介绍了Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

数据结构为数组中包含对象--树形结构,用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组件模板形式实现对象数组数据循环为树形结构。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/37462.html

猜你在找的Vue相关文章