Click the first layer, the second layer and the third layer to display their corresponding data (including click the parent layer node back and forth, multiple clicks)

Get the current node of the parent and child. , directly to the code

<el-tree :data="companyList" node-key="id" :props="defaultProps" :default-expanded-keys="[0]" :accordion="true" Ref ="tree" :highlight-current="true" @node-click="handleNodeClick" current-node-key="id" <span class="custom-tree-node" style="display: flex; align-items: center" slot-scope="{ node, data }" > <span style="font-size: 13px">{{ data.name }}</span> <span> <el-button style="font-weight: bold; margin-left: 6px" type="text" size="mini" @click="() => append(node, data)" >... </el-button > </span> </span> </el-tree>Copy the code

The rendering looks something like this: Click on the corresponding hierarchical node to display the data content of the response

Js code:

handleNodeClick(defaultKeys, node, info) { let name = defaultKeys.name; Log (defaultKeys) console.log(node) console.log(info) // Determine which layer node is clicked; 1. Outermost parent node; 2. Sub-nodes of the second layer; 3. Content of the last layer node; 4,... If (node.level == 1){this.panyname = name this.gradename = ''  this.employeeName = '' } else if (node.level == 2){ this.gradeName = name this.employeeName = '' } else if (node.level == 3) { this.employeeName = name } console.log(this.companyName) console.log(this.gradeName) Console. log(this.employeename) // Request interface, To get the data this. GetEmployeeList (enclosing currentPage, enclosing pageSize, ' ', enclosing gradeName, enclosing employeeName, this.com panyName); },Copy the code

HandleNodeClick: is the method triggered by clicking on the node, receiving three parameters (click on the object corresponding to the node, node corresponding node, component itself), respectively print and see

There is a level field in the node that we need to use. There is a comment in the code, which can be seen by yourself. There is a comment in the code, which can be seen by yourself

Tree control with check boxes

HTML part of the code, @check-change is a callback when the node check status changes

	<el-tree
            :data="companyList"
            node-key="id"
            :props="defaultProps"
            :default-expanded-keys="[0]"
            :accordion="true"
            ref="tree"
            @check-change="handleCheckChange"
            :highlight-current="true"
            show-checkbox
            @node-click="handleNodeClick"
            current-node-key="id"
            node-expand="expandChange"
            :expand-on-click-node="true"
          >
            <span
              class="custom-tree-node"
              style="display: flex; align-items: center"
              slot-scope="{ node, data }"
            >
              <span style="font-size: 13px">{{ data.name }}</span>
            </span>
          </el-tree>
Copy the code

The three parameters are: the object corresponding to the node in the array passed to the data property, whether the node itself is selected, and whether there are selected nodes in the node’s subtree

HandleCheckChange (data, checked, indeterminate){this.ischecked = checked console.log(data) {node-key=" XXXXX "; Console.log (this.$refs.tree.getCheckedKeys()) // Filter the outermost ID (2 digits in the bottom image) let employeeIdArr = this.$refs.tree.getCheckedKeys().filter(item => { return item.length ! == 2 }) console.log(employeeIdArr.join(',')) this.employeeId = employeeIdArr.join(',') },Copy the code

Above is the data obtained by key; Below is the filtered data. So you get the data that you clicked on, and you send it to the background