Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to realize the tree-shaped secondary table in basic angular". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how to achieve a tree-shaped second-level table.

Let's first look at the effect:

Code:

1 、 html

Node name Node Management IP Node Login name Node Login password / / use ng-container as an empty tag to assist in placing for or if events It cannot be found in the review element {{item.name}} / / below is the picture of the arrow, which is the switch between expanding and folding the arrow. By judging whether the current click index is equal to the list index, it is expanded, otherwise it is folded.

{{item.ip}} {{item.username}} {{item.password}} / re-use ng-container tags to nest the children of tables / / since for loops and if judgments cannot co-exist within the same tag, our hidden event if is placed in the tr tag By judging whether the currently clicked index is consistent with the list index, if it is equal, it will be folded, and if it is not equal, the function will be displayed. {{childItem.masterIp}} {{childItem.ip}} {{childItem.username}} {{childItem.password}}

2 、 less

.usercontent _ content {width: 100%; height: calc (~ "100%-60px"); overflow: auto; > div:nth-child (1) {> table {width: 100%; tr {td {width: 25%; text-align: center; font-size: 14px Color: # fff; padding: 16px 0px; box-shadow: 0 1px # 333;} .img {> div {width: 100%; display: flex; position: relative > div:nth-child (1) {width: 85%; white-space: nowrap; text-overflow: ellipsis;-o-text-overflow: ellipsis; overflow: hidden; margin: 0 auto }} img {height: 10px! important; width: 10px! important; margin-left: 0! important; position: absolute; right: 0; top: 3px } > div:nth-child (2) {height: 80px; width: 90%; display: flex; align-items: center; margin: 0 auto; justify-content: flex-end; # page {display: table }

3 、 js

(1) the format of currentTotalList table data is similar to the following (you can write your own simulation data):

(2) initialize the current click index variable currentClickOpenIndex to-1

(3) it is a click event to expand and fold the arrow:

ClickShowChildList = (iitem item) = > {console.log (iMagnethis. CurrentClickOpenIndex) if (this.currentClickOpenIndex==i) {this.currentClickOpenIndex=-1} else {this.currentClickOpenIndex= I}} so far, I believe you have a deeper understanding of how to achieve a tree-shaped secondary table. You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.