From 1788c3acbc31ce9241aa4313767e36a183718623 Mon Sep 17 00:00:00 2001
From: zeng yuneng <nn_0223@163.com>
Date: Wed, 7 Dec 2022 11:37:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E5=87=86=E8=B0=83=E7=A0=94=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B-=E4=BA=BA=E5=91=98=E9=80=89=E6=8B=A9tree=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/roleTree/index.vue | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/roleTree/index.vue b/src/components/roleTree/index.vue
index a90e71c3b..5bf1d07fc 100644
--- a/src/components/roleTree/index.vue
+++ b/src/components/roleTree/index.vue
@@ -26,6 +26,7 @@
               </el-form-item>
             </el-form>
             <div class="divTree">
+                <!-- 当前tree展示全部人员 -->
                 <el-tree
                         v-if="open1 && isVisible"
                         node-key="id"
@@ -50,6 +51,7 @@
                       <span> {{ node.label }} </span>
                   </span>
                 </el-tree>
+                <!-- 当前tree展示搜索出的人员 -->
                 <el-tree
                         v-if="!open1 && isVisible"
                         node-key="id"
@@ -67,7 +69,8 @@
                         @check="drawerCheck"
                         show-checkbox
                         ref="tree"
-                        :lazy="false">
+                        :lazy="false"
+                        :key="treeKey">
                   <span class="custom-tree-node" slot-scope="{ node, data }">
                       <span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
                       <span> {{ node.label }} </span>
@@ -113,7 +116,7 @@
         props: {
             checkBox: { // 单选/多选
                 type: Boolean,
-                default: false,
+                default: false,//默认false多选
             },
             isTitle: { // 标题
                 type: String
@@ -135,16 +138,17 @@
         },
         data () {
             return {
-                defaultKey: [],
+                treeKey:1,
+                defaultKey: [],//默认展开的节点的 key 的数组
                 visible: false,
                 selectList: [],
-                nodeList2: [],
+                nodeList2: [],//默认勾选的节点的 key 的数组
                 delList: [],
                 roleList: [],
                 filterText: '',
-                defaultProps: {
-                    children: 'children',
-                    label: 'name',
+                defaultProps: {//配置选项
+                    children: 'children',//指定子树为节点对象的某个属性值
+                    label: 'name',//指定节点标签为节点对象的某个属性值
                 },
                 treeData1: [],
                 treeData: [],
@@ -198,8 +202,9 @@
                 )
             },
           searchChange(){
+              // 查询
             if (this.filterText.length) {
-              this.open1 = false
+              this.open1 = false // 显示第二个tree
               this.treeLoading = true
               this.defaultKey = []
               this.$http.get('SarInstitution/institution/getNextTwo', {
@@ -211,8 +216,7 @@
                 })
                 this.treeLoading = false
               })
-
-
+              // this.treeKey++
 
 
               // this.$http.get('SarInstitution/institution/institutionAndUser', {
@@ -265,6 +269,7 @@
                 }
             },
             checkChange (row, type, c) {
+               //节点选中状态发生变化时的回调(传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点)
                 if (this.checkBox) {
                 } else {
                     if (type) {
@@ -328,7 +333,8 @@
                 }
                 this.open1 = true
             },
-            drawerCheck (data) {
+            drawerCheck (data) {//当复选框被点击的时候触发
+              //共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
                 if (this.checkBox) { // 单选
                     // 单选判断
                     let getlist = this.$refs.tree.getCheckedNodes()
@@ -363,6 +369,7 @@
                 }
             },
             loadNode(node, resolve) {
+              //加载子树数据的方法，仅当 lazy 属性为true 时生效
                 if (node.level === 0) {
                     return resolve(this.treeData);
                 }