From ec50416c73a8ca349128db91cc517f41f7599ab5 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 03 四月 2024 11:36:22 +0800
Subject: [PATCH] feat:添加表格移入展示信息
---
src/views/screen/components/screen-table/index.vue | 90 +++++++++++++++++++++++++++++++++++++-------
1 files changed, 75 insertions(+), 15 deletions(-)
diff --git a/src/views/screen/components/screen-table/index.vue b/src/views/screen/components/screen-table/index.vue
index df8fd27..52fe9ee 100644
--- a/src/views/screen/components/screen-table/index.vue
+++ b/src/views/screen/components/screen-table/index.vue
@@ -4,23 +4,59 @@
<el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table">
<el-table-column prop="name" label="鍦板尯" align="center" width="100">
</el-table-column>
- <el-table-column label="浜鸿劯璁惧" align="center">
- <el-table-column prop="data1" label="璁惧姝ｅ父鏁�" align="center">
- </el-table-column>
- <el-table-column prop="data1" label="璁惧寮傚父鏁�" align="center">
- </el-table-column>
+
+ <el-table-column label="浜鸿劯璁惧姝ｅ父鐜�" align="center">
+ <template slot-scope="scope">
+ <el-tooltip placement="top">
+ <div slot="content">
+ <div class="tip-item">
+ <div class="tip-label">璁惧姝ｅ父鏁�:</div>
+ <div class="tip-info tip-success">12</div>
+ </div>
+ <div class="tip-item">
+ <div class="tip-label">璁惧寮傚父鏁�:</div>
+ <div class="tip-info tip-danger">12</div>
+ </div>
+ </div>
+ <div class="tip-num">75%</div>
+ </el-tooltip>
+ </template>
</el-table-column>
- <el-table-column label="杞﹁締璁惧" align="center">
- <el-table-column prop="data1" label="璁惧姝ｅ父鏁�" align="center">
- </el-table-column>
- <el-table-column prop="data1" label="璁惧寮傚父鏁�" align="center">
- </el-table-column>
+
+ <el-table-column label="杞﹁締璁惧姝ｅ父鐜�" align="center">
+ <template slot-scope="scope">
+ <el-tooltip placement="top">
+ <div slot="content">
+ <div class="tip-item">
+ <div class="tip-label">璁惧姝ｅ父鏁�:</div>
+ <div class="tip-info tip-success">12</div>
+ </div>
+ <div class="tip-item">
+ <div class="tip-label">璁惧寮傚父鏁�:</div>
+ <div class="tip-info tip-danger">12</div>
+ </div>
+ </div>
+ <div class="tip-num">75%</div>
+ </el-tooltip>
+ </template>
</el-table-column>
- <el-table-column label="瑙嗛璁惧" align="center">
- <el-table-column prop="data1" label="璁惧姝ｅ父鏁�" align="center">
- </el-table-column>
- <el-table-column prop="data1" label="璁惧寮傚父鏁�" align="center">
- </el-table-column>
+
+ <el-table-column label="瑙嗛璁惧姝ｅ父鐜�" align="center">
+ <template slot-scope="scope">
+ <el-tooltip placement="top">
+ <div slot="content">
+ <div class="tip-item">
+ <div class="tip-label">璁惧姝ｅ父鏁�:</div>
+ <div class="tip-info tip-success">12</div>
+ </div>
+ <div class="tip-item">
+ <div class="tip-label">璁惧寮傚父鏁�:</div>
+ <div class="tip-info tip-danger">12</div>
+ </div>
+ </div>
+ <div class="tip-num">75%</div>
+ </el-tooltip>
+ </template>
</el-table-column>
</el-table>
</div>
@@ -165,4 +201,28 @@
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
background-color: #447ed648;
}
+
+.tip-item {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+ font-size: 16px;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+
+ .tip-label {
+ color: #5b83bd;
+ margin-right: 10px;
+ }
+
+ .tip-success {
+ color: #0cd81d;
+ }
+
+ .tip-danger {
+ color: #e20c0c;
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0