<template>
|
<div class="table">
|
<div class="table-header">
|
<!-- <div class="close-btn" @click="closeTable">×</div> -->
|
</div>
|
<el-table :data="tableData" stripe style="width: 350px; height: calc(100% - 320px)">
|
<el-table-column prop="region" label="区域" >
|
<template #default="scope">
|
<div>{{ scope.row.region }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="affectedPeople" label="危险等级" width="60">
|
<template #default="scope">
|
<div>{{ Math.random() > 0.5 ? 'I' : 'II' }}</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="affectedPeople" label="受灾人员" width="60"></el-table-column>
|
<el-table-column prop="damagedHouses" label="受损房屋" width="60"></el-table-column>
|
<!-- <el-table-column prop="economicLoss" label="经济损失（万元）"></el-table-column> -->
|
<!-- <el-table-column prop="injuredPeople" label="受伤人员数量"></el-table-column> -->
|
<!-- <el-table-column prop="damagedInfrastructure" label="受损基础设施数量"></el-table-column> -->
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "Table",
|
components: {},
|
data() {
|
return {
|
tableData: [
|
{
|
region: "尹家西沟",
|
affectedPeople: 200,
|
damagedHouses: 50,
|
economicLoss: 100,
|
injuredPeople: 20,
|
damagedInfrastructure: 10,
|
},
|
{
|
region: "河西",
|
affectedPeople: 150,
|
damagedHouses: 30,
|
economicLoss: 80,
|
injuredPeople: 15,
|
damagedInfrastructure: 8,
|
},
|
{
|
region: "南梁小东沟",
|
affectedPeople: 300,
|
damagedHouses: 80,
|
economicLoss: 200,
|
injuredPeople: 35,
|
damagedInfrastructure: 15,
|
},
|
{
|
region: "大窑沟",
|
affectedPeople: 250,
|
damagedHouses: 60,
|
economicLoss: 120,
|
injuredPeople: 25,
|
damagedInfrastructure: 12,
|
},
|
{
|
region: "大东沟",
|
affectedPeople: 180,
|
damagedHouses: 40,
|
economicLoss: 90,
|
injuredPeople: 18,
|
damagedInfrastructure: 9,
|
},
|
{
|
region: "尹家西沟",
|
affectedPeople: 320,
|
damagedHouses: 90,
|
economicLoss: 220,
|
injuredPeople: 40,
|
damagedInfrastructure: 18,
|
},
|
],
|
}
|
},
|
created() {
|
this.tableData.forEach((item, index) => {
|
item.region = cityData.listData[index]
|
})
|
},
|
methods: {
|
closeTable() {
|
// this.$parent.tableShow = false
|
},
|
handleRowClick(row, event, column) {
|
// this.$parent.messageShow = true
|
},
|
},
|
}
|
</script>
|
<style lang="less">
|
.table {
|
opacity: 0.8;
|
// position: absolute;
|
}
|
|
.table-header {
|
// position: absolute;
|
// top: -15px;
|
// right: -15px;
|
// z-index: 1000;
|
// opacity: 0.8;
|
}
|
|
.close-btn {
|
cursor: pointer;
|
font-size: 20px;
|
color: white;
|
text-align: center;
|
font-size: 26px;
|
line-height: 30px;
|
padding: 5px;
|
width: 30px;
|
height: 30px;
|
border-radius: 50%;
|
background-color: #41ae94 !important;
|
}
|
/* 设置表格容器背景色和透明度 */
|
.el-table {
|
background-color: transparent !important;
|
color: #fff !important;
|
}
|
// color: rgba(10, 70, 63, 0.8);
|
|
/* 修改表格行背景色 */
|
.el-table__body-wrapper tr {
|
background-color: transparent !important;
|
border-bottom-color: #85ffe3 !important;
|
}
|
|
.el-table tr {
|
background-color: transparent !important;
|
}
|
|
.el-table th.el-table__cell {
|
background-color: transparent !important;
|
color: #fff;
|
}
|
|
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
background-color: transparent !important;
|
}
|
|
/* 修改表格表头行背景色 */
|
.el-table__header-wrapper tr {
|
background-color: transparent !important;
|
border-bottom-color: #85ffe3 !important;
|
}
|
|
/* 修改表格边框颜色 */
|
.el-table__header-wrapper th,
|
.el-table__body-wrapper td {
|
border-color: #85ffe3 !important;
|
}
|
|
/* 修改表格单元格分割线颜色 */
|
.el-table__body-wrapper tr td:not(:last-child),
|
.el-table__header-wrapper tr th:not(:last-child) {
|
border-right-color: #85ffe3 !important;
|
}
|
|
.el-table tr:hover {
|
background-color: transparent !important;
|
}
|
|
/* 修改鼠标悬停时表格行的背景色 */
|
.el-table__body-wrapper tr:hover {
|
background-color: rgba(15, 100, 90, 0.8) !important;
|
}
|
|
.el-table__cell:hover .el-table tr {
|
background-color: rgba(15, 100, 90, 0.8) !important;
|
}
|
|
.el-table {
|
--el-table-row-hover-bg-color: rgba(15, 100, 90, 0.8) !important;
|
}
|
</style>
|
