添加树形结构

src/views/outpatientDetails.vue

@@ -160,10 +160,10 @@
       <!-- 有数据 -->
       <div
         class="outpatientDetails_bottom_leftShowBox"
-        v-if="goods.length !== 0"
+       
       >
         <div class="outpatientDetails_bottom_leftShowBox_left">
-          <ul class="outpatientDetails_bottom_leftShowBox_left_ul">
+          <!-- <ul class="outpatientDetails_bottom_leftShowBox_left_ul">
             <li v-for="(item, index) in goods" :key="index">
               <div
                 @click="
@@ -181,24 +181,39 @@
                   {{ item.iteM_TYPE }}:{{ decimal(item.totalFee) }}</span
                 >
                 <span :class="{ fc3: index == checkindex }" class="sp2">
-                  <!-- <span class="sp2_avg">
-										平均:
-										{{ decimal(item.avgFee) }}
-									</span> -->
-                  <!-- <span class="sp2_reto" v-ratio="[item.proportion / 100, item.proportion / 100, `${index == checkindex ? '#fff' : '#6a707e'}`]">
-								</span> -->
+                
                   <span class="sp2_reto" v-if="item.proportion <= 0">
                     {{ decimal(item.proportion * -1) + "%" }}
-                    <!-- <img style="width: 4px; height: 12px; margin-left: 5px" src="../assets/img/dataCockpit/lvse_zuo.png" /> -->
+                   
                   </span>
                   <span class="sp2_reto" v-else>
                     {{ decimal(item.proportion) + "%" }}
-                    <!-- <img style="width: 4px; height: 12px; margin-left: 5px" src="../assets/img/dataCockpit/hongse_you.png" /> -->
+                   
                   </span>
                 </span>
               </div>
             </li>
-          </ul>
+          </ul> -->
+       
+         <el-table
+						:data="tableData1"
+						style="width: 100%; margin-bottom: 20px"
+						header-row-style="height:100px"
+						row-key="id"
+						:default-expand-all="false"
+						:highlight-current-row='true'
+						:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+						@row-click="eowclick"
+						@expand-change='changeRowClick'
+						
+					>
+						<el-table-column prop="iteM_TYPE" label="项目名称" width="100" header-align="center" align="center"> </el-table-column>
+						<el-table-column prop="name" label="总金额(小计)" width="80" header-align="center" align="center"> </el-table-column>
+						<el-table-column prop="address" label="占总费用(比例)" width="80" header-align="center" align="center"> </el-table-column>
+						<el-table-column prop="cc" label="预计DRG设定费用(参考)"  header-align="center" align="center"> </el-table-column>
+						<el-table-column prop="dd" label="设定费用比例(参考)"  header-align="center" align="center"> </el-table-column>
+					</el-table>
+       
         </div>
         <!-- 中间有数据样式 表格-->
         <div
@@ -255,7 +270,7 @@
       </div>
 
       <!-- 表格无数据样式 -->
-      <div class="outpatientDetails_bottom_leftShowBox" v-else>
+      <!-- <div class="outpatientDetails_bottom_leftShowBox" v-else>
         <div class="outpatientDetails_bottom_leftShowBox_box">
           <img
             class="outpatientDetails_bottom_leftShowBox_box_img"
@@ -266,7 +281,7 @@
             暂无数据
           </div>
         </div>
-      </div>
+      </div> -->
       <!-- 右侧有数据 -->
       <div class="outpatientDetails_bottom_rght2">
         <div class="outpatientDetails_bottom_rght2_top">
@@ -361,6 +376,20 @@ export default {
       }
     };
 
+    //当某一个行被点击时
+		const eowclick=(row)=>{
+		console.log('row',row);
+			
+			
+		};
+		//当行展开和关闭是触发
+		const changeRowClick=(row)=>{
+			console.log('row-chang',row);
+			
+
+
+		};
+
     //异常问题接口 显示全部异常信息
     const GetProjectRulesData = () => {
       http
@@ -516,6 +545,69 @@ export default {
       // state.checkindex = index;
     };
     let state = reactive({
+      	tableData1: [
+				{
+					id: 1,
+					iteM_TYPE: '检查费',
+					name: '300',
+					address: '高 30%',
+					cc: '3000',
+					dd: '低 30%',
+				},
+				
+				{
+					id: 3,
+					iteM_TYPE: '检查费',
+					name: '300',
+					address: '高 30%',
+					cc: '3000',
+					dd: '高 30%',
+					children: [
+						{
+							id: 31,
+							iteM_TYPE: '检查费',
+							name: '300',
+							address: '高 30%',
+							cc: '3000',
+							dd: '低 30%',
+						},
+						{
+							id: 32,
+							iteM_TYPE: '检查费',
+							name: '300',
+							address: '高 30%',
+							cc: '3000',
+							dd: '低 30%',
+						},
+					],
+				},
+				{
+					id: 4,
+					iteM_TYPE: '检查费',
+					name: '300',
+					address: '高 30%',
+					cc: '3000',
+					dd: '低 30%',
+					children: [
+						{
+							id: 31,
+							iteM_TYPE: '检查费',
+							name: '300',
+							address: '高 30%',
+							cc: '3000',
+							dd: '低 30%',
+						},
+						{
+							id: 32,
+							iteM_TYPE: '检查费',
+							name: '300',
+							address: '高 30%',
+							cc: '3000',
+							dd: '低 30%',
+						},
+					],
+				},
+			],
       HistoryInfo: {
         name: "",
         healthyID: "",
@@ -595,7 +687,9 @@ export default {
       GetProjectRulesData,
       getControl,
       gettype,
-      getruleId
+      getruleId,
+      eowclick,
+			changeRowClick
     };
   },
 };
@@ -603,6 +697,24 @@ export default {
 <style lang="scss" scoped>
 @import "../styles/mixin.scss";
 // @import '../styles/media/components/outpatientDetails.scss';
+
+
+// 左侧表格点击高亮背景色
+::v-deep .el-table__body tr.current-row > td {
+  background-color: #ffff !important;
+ 
+}
+// 点击文本颜色
+::v-deep .current-row{
+	color: #55a6da !important;
+}
+// 点击icon颜色
+::v-deep .current-row .el-table__expand-icon{
+color: #55a6da !important;
+}
+
+
+
 .outpatientDetails {
   // height: calc(100% - 50px);
   // background-color: white;
@@ -1015,7 +1127,7 @@ export default {
       // 有数据
       &_left {
         list-style-type: none;
-        width: 27%;
+        width: 35%;
         height: 90%;
 
         overflow-y: auto;
@@ -1120,7 +1232,7 @@ export default {
         }
       }
       &_right {
-        width: 72%;
+        width: 65%;
         // 无数据样式
         &_box {
           width: 100%;