From 16eb67ab6b103663d30cad9ba74360f982e131cb Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期二, 03 九月 2024 10:34:59 +0800
Subject: [PATCH] 自定义列显隐控制
---
src/views/screen/components/screen-table/index.vue | 149 +++++++++++++++++++++++++++----------------------
1 files changed, 81 insertions(+), 68 deletions(-)
diff --git a/src/views/screen/components/screen-table/index.vue b/src/views/screen/components/screen-table/index.vue
index 2cf0b6d..be0de28 100644
--- a/src/views/screen/components/screen-table/index.vue
+++ b/src/views/screen/components/screen-table/index.vue
@@ -6,14 +6,8 @@
></wrapper-title> -->
<div class="table-content" ref="tabContent">
<div class="table-wrapper">
- <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 :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table">
+ <el-table-column prop="area" label="鍦板尯" align="center" width="100">
</el-table-column>
<el-table-column label="浜鸿劯璁惧" align="center">
@@ -22,14 +16,20 @@
<div slot="content">
<div class="tip-item">
<div class="tip-label">璁惧姝ｅ父鏁�:</div>
- <div class="tip-info tip-success">12</div>
+ <div class="tip-info tip-success">
+ {{ scope.row.faceNormalNum }}
+ </div>
</div>
<div class="tip-item">
<div class="tip-label">璁惧寮傚父鏁�:</div>
- <div class="tip-info tip-danger">4</div>
+ <div class="tip-info tip-danger">
+ {{ scope.row.faceErrorNum }}
+ </div>
</div>
</div>
- <div class="tip-num">75%</div>
+ <div class="tip-num">
+ {{ scope.row.faceRate ? scope.row.faceRate + '%' : '--' }}
+ </div>
</el-tooltip>
</template>
</el-table-column>
@@ -40,14 +40,20 @@
<div slot="content">
<div class="tip-item">
<div class="tip-label">璁惧姝ｅ父鏁�:</div>
- <div class="tip-info tip-success">12</div>
+ <div class="tip-info tip-success">
+ {{ scope.row.carNormalNum }}
+ </div>
</div>
<div class="tip-item">
<div class="tip-label">璁惧寮傚父鏁�:</div>
- <div class="tip-info tip-danger">4</div>
+ <div class="tip-info tip-danger">
+ {{ scope.row.carErrorNum }}
+ </div>
</div>
</div>
- <div class="tip-num">75%</div>
+ <div class="tip-num">
+ {{ scope.row.carRate ? scope.row.carRate + '%' : '--' }}
+ </div>
</el-tooltip>
</template>
</el-table-column>
@@ -58,14 +64,20 @@
<div slot="content">
<div class="tip-item">
<div class="tip-label">璁惧姝ｅ父鏁�:</div>
- <div class="tip-info tip-success">12</div>
+ <div class="tip-info tip-success">
+ {{ scope.row.videoNormalNum }}
+ </div>
</div>
<div class="tip-item">
<div class="tip-label">璁惧寮傚父鏁�:</div>
- <div class="tip-info tip-danger">4</div>
+ <div class="tip-info tip-danger">
+ {{ scope.row.videoErrorNum }}
+ </div>
</div>
</div>
- <div class="tip-num">75%</div>
+ <div class="tip-num">
+ {{ scope.row.videoRate ? scope.row.videoRate + '%' : '--' }}
+ </div>
</el-tooltip>
</template>
</el-table-column>
@@ -80,57 +92,62 @@
export default {
name: "ScreenTable",
-
+ props: {
+ tableData: {
+ type: Array,
+ default: null,
+ },
+ },
components: {
WrapperTitle,
},
data() {
return {
tableHeight: 40,
- tableData: [
- {
- name: "瀵岄『鍘�",
- data1: 1123,
- data2: 1123,
- data3: 1123,
- },
- {
- name: "鑽ｅ幙",
- data1: 1123,
- data2: 1123,
- data3: 1123,
- },
- {
- name: "楂樻柊鍖�",
- data1: 1123,
- data2: 1123,
- data3: 1123,
- },
- {
- name: "鑷祦浜曞尯",
- data1: 1123,
- data2: 1123,
- data3: 1123,
- },
- {
- name: "璐′簳鍖�",
- data1: 1123,
- data2: 1123,
- data3: 1123,
- },
- {
- name: "澶у畨鍖�",
- data1: 1123,
- data2: 1123,
- data3: 1123,
- },
- {
- name: "娌挎哗鍖�",
- data1: 1123,
- data2: 1123,
- data3: 1123,
- },
- ],
+ // tableData: [
+ // {
+ // name: "瀵岄『鍘�",
+ // data1: 1123,
+ // data2: 1123,
+ // data3: 1123,
+ // },
+ // {
+ // name: "鑽ｅ幙",
+ // data1: 1123,
+ // data2: 1123,
+ // data3: 1123,
+ // },
+ // {
+ // name: "楂樻柊鍖�",
+ // data1: 1123,
+ // data2: 1123,
+ // data3: 1123,
+ // },
+ // {
+ // name: "鑷祦浜曞尯",
+ // data1: 1123,
+ // data2: 1123,
+ // data3: 1123,
+ // },
+ // {
+ // name: "璐′簳鍖�",
+ // data1: 1123,
+ // data2: 1123,
+ // data3: 1123,
+ // },
+ // {
+ // name: "澶у畨鍖�",
+ // data1: 1123,
+ // data2: 1123,
+ // data3: 1123,
+ // },
+ // {
+ // name: "娌挎哗鍖�",
+ // data1: 1123,
+ // data2: 1123,
+ // data3: 1123,
+ // },
+ // ],
};
},
methods: {
@@ -201,7 +218,7 @@
border-color: #56739e99 !important;
}
-::v-deep .el-table th.el-table__cell > .cell {
+::v-deep .el-table th.el-table__cell>.cell {
color: #447ed6;
}
@@ -215,11 +232,7 @@
background-color: transparent !important;
}
-::v-deep
- .el-table--enable-row-hover
- .el-table__body
- tr:hover
- > td.el-table__cell {
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
background-color: #447ed648;
}
--
Gitblit v1.8.0