From cd80929f0ae8882a98cfe3936b2a96bded1c12d8 Mon Sep 17 00:00:00 2001 From: chenyabin <Chenab123!> Date: 星期三, 07 四月 2021 18:59:47 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/develop' into develop --- src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue | 152 ++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 116 insertions(+), 36 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue index 12f1a91..fed1e41 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue @@ -1,48 +1,79 @@ <template> - <div class="public-table"> - <el-table - :data="tableData" - style="width: 100%"> - <el-table-column - prop="date" - label="鏃ユ湡" - width="180"> - </el-table-column> - <el-table-column - prop="name" - label="濮撳悕" - width="180"> - </el-table-column> - <el-table-column - prop="address" - label="鍦板潃"> - </el-table-column> - </el-table> + <div class="win"> + <!-- 鍥涗釜瑙掔殑杈规鏁堟灉 --> + <div class="border_corner border_corner_left_top"></div> + <div class="border_corner border_corner_right_top"></div> + <div class="border_corner border_corner_left_bottom"></div> + <div class="border_corner border_corner_right_bottom"></div> + <div class="main"> + <div class="main-table"> + <el-table :data="listData" style="width: 100%" stripe='stripe' + tooltip-effect="dark" :row-class-name="tableRowClassName"> + <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop" + :label="item.label"></el-table-column> + </el-table> + </div> + </div> </div> </template> <script> export default { name: 'PublicTable', + props: ['displayContentTable'], data () { return { - tableData: [{ - date: '2016-05-02', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�' - }, { - date: '2016-05-04', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�' - }, { - date: '2016-05-01', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�' - }, { - date: '2016-05-03', - name: '鐜嬪皬铏�', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�' - }] + listData: [], + listLabel: [ + { + label: '搴忓彿', + prop: 'StoragePlaceId' + }, + { + label: '绫诲埆', + prop: 'StoragePlaceTypeName' + }, + { + label: '鍥哄簾鍚嶇О', + prop: 'StoragePlaceName' + }, + { + label: '浠g爜', + prop: 'StorageZDMJ' + }, + { + label: '浜х敓閲�(t)', + prop: 'StorageZCL' + }, + { + label: '璐瓨閲�(t)', + prop: 'StorageZCNL' + }, + { + label: '浜х敓瑁呯疆', + prop: 'StorageType' + } + ] + } + }, + mounted () { + this.$nextTick(() => { + this.displayContentTable.forEach(item => { + this.listData = item + }) + }) + }, + methods: { + tableRowClassName ({ + row, + rowIndex + }) { + if (rowIndex % 2 === 0) { + return 'warning-row' + } else if (rowIndex % 2 === 1) { + return 'success-row' + } + return '' } } } @@ -50,4 +81,53 @@ <style lang="less" scoped> +.win { + position: relative; + background-color: rgba(33, 41, 69, 0.9); + //width: 6rem; + height: 1.5rem; +} + +.main { + .main-table { + width: 100%; + } +} + +.border_corner { + z-index: 999; + position: absolute; + width: 14px; + height: 14px; + background: rgba(0, 0, 0, 0); + border: 1px solid #47d5ea; +} + +.border_corner_left_top { + top: 0; + left: 0; + border-right: none; + border-bottom: none; +} + +.border_corner_right_top { + top: 0; + right: 0; + border-left: none; + border-bottom: none; +} + +.border_corner_left_bottom { + bottom: 0; + left: 0; + border-right: none; + border-top: none; +} + +.border_corner_right_bottom { + bottom: 0; + right: 0; + border-left: none; + border-top: none; +} </style> -- Gitblit v1.8.0