这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
这篇文章主要介绍了 Vue 组件模板形式实现对象数组数据循环为树形结构, 本文用 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 组件模板形式实现对象数组数据循环为树形结构,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0828/343915.html