调用
组件tree
tree.component.html{cssClass}}">{{item_lv1[name_field]}}({{item_lv1.children.length}}){{item_lv1.IS_SIGN ? btn_text_signed : btn_text }}{{j+1}}{{item_lv2[name_field]}}{{item_lv2.IS_SIGN ? btn_text_signed : btn_text }}自动打卡{{j+1}}.{{k+1}}{{item_lv3[name_field]}}{{j+1}}.{{k+1}}.{{l+1}} {{item_lv4[name_field]}}{{j+1}}.{{k+1}}.{{l+1}}.{{m+1}}{{item_lv5[name_field]}}{{j+1}}.{{k+1}}.{{l+1}}.{{m+1}}.{{n+1}} {{item_lv6[name_field]}}
tree.component.scss.tree-container {.item {padding: 8px 16px 8px 0;display: flex;align-items: center;border-bottom: 1px solid #d2d2d2;&.selected {background-color: #eaeaea;}ion-icon {color: #aaaaaa;margin: 0 10px;&.hide {opacity: 0;}}span {width: min-content;flex: 1 0 auto;font-size: 14px;}}.item-lv2 {padding-left: 14px !important;}.item-lv3 {padding-left: 28px !important;}.item-lv4 {padding-left: 42px !important;}.item-lv5 {padding-left: 56px !important;}.item-lv6 {padding-left: 70px !important;}[name="chevron-down-outline"],[name="chevron-up-outline"] {display: none;}
}tree.component.tsimport { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';@Component({selector: 'app-tree',templateUrl: './tree.component.html',styleUrls: ['./tree.component.scss'],
})
export class TreeComponent implements OnInit {@Input() list;@Input() name_field;@Input() cssClass='';@Input() btn_text=''; //按钮文本@Input() btn_text_signed=''; //按钮文本@Input() show_sn; //是否显示序号@Input() ion_fold = 'caret-forward-outline'; //是否显示序号@Input() ion_expand = 'caret-down-outline'; //是否显示序号@Output() onChange = new EventEmitter();@Output() onButtonClick = new EventEmitter();node_selected = {};constructor() { }ngOnInit() {this.name_field = this.name_field ? this.name_field : 'name';this.show_sn = this.show_sn ? this.show_sn : false;}// 选择一个节点selectNode(i = null, j = null, k = null, l = null, m = null, n = null) {if (n != null) {// 点击的第6级this.node_selected = this.list[i].children[j].children[k].children[l].children[m].children[n];this.list[i].children[j].children[k].children[l].children[m].children[n].expand = !this.list[i].children[j].children[k].children[l].children[m].children[n].expand;} else if (m != null) {// 点击的第5级this.node_selected = this.list[i].children[j].children[k].children[l].children[m];this.list[i].children[j].children[k].children[l].children[m].expand = !this.list[i].children[j].children[k].children[l].children[m].expand;} else if (l != null) {// 点击的第4级this.node_selected = this.list[i].children[j].children[k].children[l];this.list[i].children[j].children[k].children[l].expand = !this.list[i].children[j].children[k].children[l].expand;} else if (k != null) {// 点击的第3级this.node_selected = this.list[i].children[j].children[k];this.list[i].children[j].children[k].expand = !this.list[i].children[j].children[k].expand;} else if (j != null) {// 点击的第2级this.node_selected = this.list[i].children[j];this.list[i].children[j].expand = !this.list[i].children[j].expand;} else if (i != null) {// 点击的第1级this.node_selected = this.list[i];this.list[i].expand = !this.list[i].expand;}this.onChange.emit(this.node_selected);}clickButton(event, item) {// console.log(event, item);this.onButtonClick.emit({event, item});}}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
