。。

src/views/Data.vue

@@ -10,9 +10,15 @@
       </fieldset>
       <div class="right">
         <div class="right-set">
-          <el-tree ref="taskTree" :data="data" node-key="device_name" :props="defaultProps" :highlight-current="true" accordion
-            @node-click="handleNodeClick">
-          </el-tree>
+          <el-tree
+          :data="data"
+          :props="defaultProps"
+          :highlight-current="true"
+          accordion 
+          node-key="id"
+          :current-node-key="currentNodekey" 
+          @node-click="handleNodeClick">
+        </el-tree>
         </div>
         <div class="right-table">
           <el-table :data="tableData" border :row-class-name="tableRowClassName"
@@ -53,13 +59,37 @@ export default {
     const taskTree = ref(null);
     const state = reactive({
       indexi: 0,
-      qdDatas: [],
-      data: [],
+      
+      qdDatas: [{
+        id: 1,
+        name: '驱动一',
+      },{
+        id: 2,
+        name: '驱动二',
+      },{
+        id: 3,
+        name: '驱动三',
+      },{
+        id: 4,
+        name: '驱动四',
+      },{
+        id: 5,
+        name: '驱动五',
+      }],
+      data: [{
+          id: 11,
+          label: '设备一',
+      }, {
+        id: 12,
+        label: '设备二',
+      }, {
+        id: 13,
+        label: '设备三',
+      
+      }],
+      currentNodekey: 11,
       tableData: [],
-      defaultProps: {
-        label: 'device_name',
-        children: 'children'
-      }
+      
     });
 
     onMounted(() => {
@@ -136,29 +166,12 @@ export default {
     width: 15%;
     border: 1px solid #006b3b;
     font-size: 16px;
-
-    img {
-      width: 24px;
-    }
-
-    >div {
-      background: #e2f4e5;
-      margin-top: 10px;
-      text-align: center;
-      line-height: 40px;
-      cursor: pointer;
-    }
-
-    .active {
-      background: #00AAA3;
-      color: #fff;
-    }
+    width: 24px;
   }
 
   .right {
     width: 84%;
     border: 1px solid #006b3b;
-    display: flex;
     justify-content: space-around;
 
     .right-set {
@@ -174,5 +187,27 @@ export default {
       // }
     }
   }
+  .active {
+    background: #00AAA3;
+    color: #fff;
+  }
+}
+.right {
+  width: 84%;
+  border: 1px solid #006b3b;
+  display: flex;
+  justify-content: space-around;
+  .right-set {
+    width: 10%;
+    padding: 20px;
+    overflow: auto;
+  }
+  .right-table {
+    width: 88%;
+    //  .el-tree-node {
+    //     border: 1px solid #ddd !important;
+    //     margin-top: 10px !important;
+    // }
+  }
 }
 </style>