<template>
|
<!-- <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="slotChildTable">
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
<div class="main-table">
|
<el-table :data="listData" style="width: 100%" height="325px" :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>
|
</template>
|
|
<script>
|
export default {
|
name: 'PublicTable',
|
props: ['displayContentTable'],
|
data () {
|
return {
|
listData: [],
|
listLabel: [
|
{
|
label: '序号',
|
prop: 'StoragePlaceId'
|
},
|
{
|
label: '类别',
|
prop: 'StoragePlaceTypeName'
|
},
|
{
|
label: '固废名称',
|
prop: 'StoragePlaceName'
|
},
|
{
|
label: '代码',
|
prop: 'StorageZDMJ'
|
},
|
{
|
label: '产生量(t)',
|
prop: 'StorageZCL'
|
},
|
{
|
label: '贮存量(t)',
|
prop: 'StorageZCNL'
|
},
|
{
|
label: '产生装置',
|
prop: 'StorageType'
|
}
|
]
|
}
|
},
|
mounted () {
|
this.$nextTick(() => {
|
this.listData.push(this.displayContentTable[0], {}, {}, {}, {}, {}, {})
|
})
|
},
|
methods: {
|
// 隔行颜色设置
|
tableRowClassName ({
|
row,
|
rowIndex
|
}) {
|
if (rowIndex % 2 === 0) {
|
return 'warning-row'
|
} else if (rowIndex % 2 === 1) {
|
return 'success-row'
|
}
|
return ''
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
//.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 {
|
border-bottom: none !important;
|
}
|
|
/deep/ .el-table th.is-leaf {
|
border-bottom: none !important;
|
}
|
|
/deep/ .el-table td {
|
height: 45px !important;
|
line-height: 45px !important;
|
}
|
|
/deep/ .el-table tbody tr:hover > td {
|
background: none !important
|
}
|
|
.slotChildTable {
|
position: relative;
|
background: rgba(33, 41, 69, 0.9);
|
//border: 1px solid red;
|
}
|
|
.slotChildTable 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>
|
