<template>
|
<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>
|
import mapApi from '@/api/mapApi'
|
|
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({}, {}, {}, {}, {}, {})
|
})
|
},
|
methods: {
|
async refsDataTable (data) {
|
const StoragePlaceId = {
|
StoragePlaceId: data
|
}
|
const result = await mapApi.getSolidWasteDetail(StoragePlaceId)
|
this.listData = result.Result.DataInfo[0]
|
console.log(this.listData)
|
},
|
// 隔行颜色设置
|
tableRowClassName ({
|
row,
|
rowIndex
|
}) {
|
if (rowIndex % 2 === 0) {
|
return 'warning-row'
|
} else if (rowIndex % 2 === 1) {
|
return 'success-row'
|
}
|
return ''
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.main-table {
|
border: 1px #02a6b5 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;
|
}
|
|
.slotChildTable span:nth-child(2) {
|
position: absolute;
|
right: -1px;
|
top: -1px;
|
padding: 10px;
|
border-style: solid;
|
border-color: #02a6b5;
|
border-width: 1px 1px 0 0;
|
}
|
|
.slotChildTable span:nth-child(3) {
|
position: absolute;
|
right: -1px;
|
bottom: -1px;
|
padding: 10px;
|
border-style: solid;
|
border-color: #02a6b5;
|
border-width: 0 1px 1px 0;
|
}
|
|
.slotChildTable 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>
|
