组织树、部门树默认选中第一个节点并加载右侧视图数据

app_web/src/widgets/ibzdepartment/dept-tree-treeview/dept-tree-treeview.vue

@@ -9,7 +9,6 @@
                     node-key="id"
                     :default-expand-all="false"
                     highlight-current
-                    :default-checked-keys="this.defaultCheckedKeys"
                     :default-expanded-keys="this.defaultExpandedKeys"
                     :props="this.defaultProps"
                     @node-click="handleNodeClick"
@@ -29,7 +28,7 @@
     })
     export default class DeptTree extends Vue {
 
-        /*树数码*/
+        /*树数据*/
         public TreeData: any = [];
 
         /*树显示说明：子树为节点对象的children,节点标签为节点对象的label*/
@@ -38,9 +37,6 @@
             label: 'label'
         }
 
-        /*默认选中节点*/
-        public defaultCheckedKeys: any = [];
-
         /*默认展开节点*/
         public defaultExpandedKeys: any = [];
 
@@ -87,8 +83,12 @@
                     // 给树赋值，数据结构在后台已经按照eltree格式化
                     _this.TreeData = response.data;
                     if (response.data && response.data.length > 0) {
-
-                        // 选中数据变更事件
+                        // 设置默认选中的节点，即高亮显示
+                        this.$nextTick(function(){
+                            let deptTree:any = this.$refs.DeptTree;
+                            deptTree.setCurrentKey(response.data[0].id);
+                        })
+                        // 默认加载第一个节点的右侧视图，调用选中数据变更事件
                         _this.selectionChange(response.data[0]);
                     }
                 }

app_web/src/widgets/ibzorganization/org-tree-treeview/org-tree-treeview.vue

@@ -9,7 +9,6 @@
                     node-key="id"
                     :default-expand-all="false"
                     highlight-current
-                    :default-checked-keys="this.defaultCheckedKeys"
                     :default-expanded-keys="this.defaultExpandedKeys"
                     :props="this.defaultProps"
                     @node-click="handleNodeClick"
@@ -28,7 +27,7 @@
     })
     export default class OrgTree extends Vue {
 
-        /*树数码*/
+        /*树数据*/
         public TreeData: any = [];
 
         /*树显示说明：子树为节点对象的children,节点标签为节点对象的label*/
@@ -37,9 +36,6 @@
             label: 'label'
         }
 
-        /*默认选中节点*/
-        public defaultCheckedKeys: any = [];
-
         /*默认展开节点*/
         public defaultExpandedKeys: any = [];
 
@@ -86,8 +82,12 @@
                     // 给树赋值，数据结构在后台已经按照eltree格式化
                     _this.TreeData = response.data;
                     if (response.data && response.data.length > 0) {
-
-                        // 选中数据变更事件
+                        // 设置默认选中的节点，即高亮显示
+                        this.$nextTick(function(){
+                            let orgTree:any = this.$refs.OrgTree;
+                            orgTree.setCurrentKey(response.data[0].id);
+                        })
+                        // 默认加载第一个节点的右侧视图，调用选中数据变更事件
                         _this.selectionChange(response.data[0]);
                     }
                 }