标准调研流程-人员选择tree渲染bug

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);
                 }