From 84dfbb0dc11d5a07bc5e76573c6642461a25ce29 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期三, 14 四月 2021 15:17:26 +0800 Subject: [PATCH] 弹出框表格问题 --- src/components/BaseNav/PublicBounced/common/PublicTable.vue | 107 ++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 92 insertions(+), 15 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/common/PublicTable.vue b/src/components/BaseNav/PublicBounced/common/PublicTable.vue index 86b2218..4b610e3 100644 --- a/src/components/BaseNav/PublicBounced/common/PublicTable.vue +++ b/src/components/BaseNav/PublicBounced/common/PublicTable.vue @@ -1,9 +1,21 @@ <template> - <div class="react"> + <!-- <div class="react">--> + <!-- <div class="main-table">--> + <!-- <el-table :data="listData" style="width: 100%" height="255px" :row-class-name="tableRowClassName">--> + <!-- <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"--> + <!-- :label="item.label" :show-overflow-tooltip="true"></el-table-column>--> + <!-- </el-table>--> + <!-- </div>--> + <!-- </div>--> + <div class="main"> + <span></span> + <span></span> + <span></span> + <span></span> <div class="main-table"> - <el-table :data="displayContentTable" style="width: 100%" height="200px" :row-class-name="tableRowClassName"> + <el-table :data="listData" style="width: 100%" height="255px" :row-class-name="tableRowClassName"> <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop" - :label="item.label"></el-table-column> + :label="item.label" :show-overflow-tooltip="true"></el-table-column> </el-table> </div> </div> @@ -48,7 +60,13 @@ ] } }, + mounted () { + this.$nextTick(() => { + this.listData.push(this.displayContentTable[0], {}, {}) + }) + }, methods: { + // 闅旇棰滆壊璁剧疆 tableRowClassName ({ row, rowIndex @@ -65,17 +83,76 @@ </script> <style lang="less" scoped> -.react { - position: relative; - background-color: rgba(33, 41, 69, 0.9); - background: linear-gradient(to left, #02a6b5, #02a6b5) left top no-repeat, - linear-gradient(to bottom, #02a6b5, #02a6b5) left top no-repeat, - linear-gradient(to left, #02a6b5, #02a6b5) right top no-repeat, - linear-gradient(to bottom, #02a6b5, #02a6b5) right top no-repeat, - linear-gradient(to left, #02a6b5, #02a6b5) left bottom no-repeat, - linear-gradient(to bottom, #02a6b5, #02a6b5) left bottom no-repeat, - linear-gradient(to left, #02a6b5, #02a6b5) right bottom no-repeat, - linear-gradient(to left, #02a6b5, #02a6b5) right bottom no-repeat; - background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px; +//.react { +// position: relative; +// background: rgba(33, 41, 69, 0.9); +// background: linear-gradient(to left, #02a6b5, #02a6b5) left top no-repeat, +// linear-gradient(to bottom, #02a6b5, #02a6b5) left top no-repeat, +// linear-gradient(to left, #02a6b5, #02a6b5) right top no-repeat, +// linear-gradient(to bottom, #02a6b5, #02a6b5) right top no-repeat, +// linear-gradient(to left, #02a6b5, #02a6b5) left bottom no-repeat, +// linear-gradient(to bottom, #02a6b5, #02a6b5) left bottom no-repeat, +// linear-gradient(to left, #02a6b5, #02a6b5) right bottom no-repeat, +// linear-gradient(to left, #02a6b5, #02a6b5) right bottom no-repeat; +// background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px; +// +// .main-table { +// //border: 1px red solid; +// } +//} +/deep/ .el-table td, .el-table th.is-leaf { + border-bottom: none; } + +/deep/ .el-table td { + height: 45px !important; + line-height: 45px !important; +} + +.main { + position: relative; + background: rgba(33, 41, 69, 0.9); + //border: 1px solid red; +} + +.main span:nth-child(1) { + position: absolute; + left: -1px; + top: -1px; + padding: 10px; + border-style: solid; + border-color: #02a6b5; + border-width: 1px 0 0 1px; +} + +.main span:nth-child(2) { + position: absolute; + right: -1px; + top: -1px; + padding: 10px; + border-style: solid; + border-color: #02a6b5; + border-width: 1px 1px 0 0; +} + +.main span:nth-child(3) { + position: absolute; + right: -1px; + bottom: -1px; + padding: 10px; + border-style: solid; + border-color: #02a6b5; + border-width: 0 1px 1px 0; +} + +.main span:nth-child(4) { + position: absolute; + left: -1px; + bottom: -1px; + padding: 10px; + border-style: solid; + border-color: #02a6b5; + border-width: 0 0 1px 1px; +} + </style> -- Gitblit v1.8.0