设备地区

src/components/Region/index.vue

@@ -1,6 +1,6 @@
 <template>
   <section>
-    <el-tree @node-click="handleNodeClick" :props="defaultProps" :load="loadNode" node-key="code" accordion lazy
+    <el-tree :current-node-key="currentNodeKey" @node-click="handleNodeClick" :props="defaultProps" :load="loadNode" node-key="code" accordion lazy highlight-current
       :expand-on-click-node="false" ref="tree" />
   </section>
 </template>
@@ -10,6 +10,22 @@
 import { areaSelect, getProvinceByArea, getProvinceByParent } from "@/api/hardware/area";
 export default {
   name: 'Region',
+  props: {
+    'currentNodeKey': {
+      type: String,
+      default: ''
+    },
+  },
+  watch: {
+    currentNodeKey(id) {
+    // Tree 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。可以用 $refs 获取 Tree 实例
+      if (id.toString()) {
+        this.$refs["tree"].setCurrentKey(id);
+      } else {
+        this.$refs["tree"].setCurrentKey(null);
+      }
+    }
+  },
   data () {
     return {
       defaultProps: {
@@ -17,36 +33,7 @@ export default {
         label: 'name',
         isLeaf: 'leaf'
       },
-      list: [
-        {
-          "id": 4, "areaName": "中原地区", "areaCode": "17", "ordinal": null, "provinceIds": null, children: [
-            { "id": 1, "areaName": "安徽省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
-            { "id": 1, "areaName": "河南省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
-          ]
-        },
-        { "id": 1, "areaName": "华北地区", "areaCode": "001", "ordinal": 1, "provinceIds": null },
-        {
-          "id": 2, "areaName": "华南地区", "areaCode": "002", "ordinal": 2, "provinceIds": null, children: [
-            { "id": 1, "areaName": "江苏省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
-            { "id": 1, "areaName": "浙江省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
-            { "id": 1, "areaName": "湖南省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
-          ]
-        }
-      ]
-
-      //   list: [
-      //     {
-      //       label: '一级 1',
-      //       children: [{
-      //         label: '二级 1-1',
-      //         children: [{
-      //           label: '三级 1-1-1'
-      //         }]
-      //       }]
-      //     }
-      //   ]
     }
-
   },
   created () {
   },