添加树形结构

src/views/outClinicalpathway.vue

@@ -2,11 +2,11 @@
  * @Author: wsq
  * @Date: 2022-04-22 15:20:58
  * @LastEditors: wsq
- * @LastEditTime: 2022-12-13 16:59:20
+ * @LastEditTime: 2022-12-26 14:47:37
  * @Description: 
 -->
 <template>
-  <!-- 患者详情页 -->
+  <!-- 临床路径外放页面 -->
   <div class="outClinicalpathway">
     <div class="outClinicalpathway_top">
       <div class="outClinicalpathway_top_div1">
@@ -91,20 +91,18 @@
     <div class="outClinicalpathway_table">
       <el-table
         ref="multipleTableRef"
+        row-key="id"
         :data="tableData"
         style="width: 100%"
         @selection-change="handleSelectionChange"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       >
         <el-table-column type="selection" width="55" />
-        <el-table-column label="医嘱类型" width="120">
+        <el-table-column label="医嘱类型" width="180">
           <template #default="scope">{{ scope.row.date }}</template>
         </el-table-column>
         <el-table-column property="name" label="路径名称" width="120" />
-        <el-table-column
-          property="address"
-          label="医院项目编码"
-          show-overflow-tooltip
-        />
+        <el-table-column property="address" label="医院项目编码" />
       </el-table>
     </div>
   </div>
@@ -157,23 +155,41 @@ export default {
       multipleSelection: [], //被选择的数据
       tableData: [
         {
-          date: "2016-05-03",
-          name: "Tom",
-          address: "No. 189, Grove St, Los Angeles",
-        },
-        {
+          id: 1,
           date: "2016-05-02",
-          name: "Tom",
+          name: "wangxiaohu",
           address: "No. 189, Grove St, Los Angeles",
         },
         {
+          id: 2,
           date: "2016-05-04",
-          name: "Tom",
+          name: "wangxiaohu",
           address: "No. 189, Grove St, Los Angeles",
         },
         {
+          id: 3,
           date: "2016-05-01",
-          name: "Tom",
+          name: "wangxiaohu",
+          address: "No. 189, Grove St, Los Angeles",
+          children: [
+            {
+              id: 31,
+              date: "",
+              name: "wangxiaohu",
+              address: "No. 189, Grove St, Los Angeles",
+            },
+            {
+              id: 32,
+              date: "",
+              name: "wangxiaohu",
+              address: "No. 189, Grove St, Los Angeles",
+            },
+          ],
+        },
+        {
+          id: 4,
+          date: "2016-05-03",
+          name: "wangxiaohu",
           address: "No. 189, Grove St, Los Angeles",
         },
       ],
@@ -181,7 +197,7 @@ export default {
     //当选择项发生变化时会触发该事件
     const handleSelectionChange = (val) => {
       state.multipleSelection = val;
-      console.log('state.multipleSelection',state.multipleSelection);
+      console.log("state.multipleSelection", state.multipleSelection);
     };
 
     onMounted(() => {});