<!-- 详情表格弹窗 -->
|
<template>
|
<div class="dataBox">
|
<el-table :data="data" style="width: 100%" height="100%"
|
:row-class-name="tableRowClassName">
|
<el-table-column
|
:title="item.label"
|
v-for="(item, index) in tableTh"
|
:key="index"
|
:prop="item.prop"
|
show-overflow-tooltip
|
:label="item.label"
|
:width="item.width"
|
placement="top"
|
>
|
<!-- <template slot-scope="scope">
|
<div :title="item.label" @click="handleClick(scope.row)"></div>
|
</template> -->
|
</el-table-column>
|
<el-table-column v-if="operate" :label="action" width="45">
|
<template slot-scope="scope">
|
<div @click="handleClick(scope.row)" class="more"></div>
|
</template>
|
</el-table-column>
|
<el-table-column v-if="deleteBut" label="删除" width="45">
|
<template slot-scope="scope">
|
<div @click="deleteClick(scope.row)" class="deleteBut"></div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
tableData: {
|
type: Array,
|
},
|
tableTh: {
|
type: Array,
|
},
|
operate: {
|
type: Boolean,
|
default: false,
|
},
|
deleteBut: {
|
type: Boolean,
|
default: false,
|
},
|
action:{
|
type: String,
|
default: '更多',
|
}
|
},
|
data() {
|
return {
|
boxShow: true,
|
login: false,
|
data: ["test"],
|
}
|
},
|
watch: {
|
tableData: {
|
handler: function (newVal, oldVal) {
|
this.data = newVal
|
},
|
immediate: true,
|
},
|
},
|
methods: {
|
//触发详情事件
|
handleClick(data) {
|
console.log(this.$parent)
|
this.$parent.handleClick(data)
|
},
|
//触发详情事件
|
deleteClick(data) {
|
this.$parent.deleteClick(data)
|
},
|
// rowDblclick(row) {
|
// this.$parent.rowDblclick(row)
|
// },
|
//样式控制
|
tableRowClassName({row, rowIndex}){
|
if (row.lx && row.lx != '非重点人') {
|
// return 'zdr-row'
|
let className = ''
|
switch (row.lx) {
|
case '独居老人':
|
className = 'zdr-row-1'
|
break;
|
case '退伍军人':
|
className = 'zdr-row-2'
|
break;
|
case '高龄老人':
|
className = 'zdr-row-3'
|
break;
|
case '困难人员':
|
className = 'zdr-row-4'
|
break;
|
case '孕妇':
|
className = 'zdr-row-6'
|
break;
|
default:
|
break;
|
}
|
return className;
|
}
|
return ''
|
}
|
},
|
mounted(){
|
//tooltip自适应适配
|
// function bodyScale() {
|
// var deviceHeight = document.documentElement.clientHeight;//获取当前分辨率下的可是区域高度
|
// var scale = deviceHeight/1080;
|
// let tooltip = document.getElementsByClassName('el-tooltip__popper')
|
// for(let i in tooltip){
|
// if(typeof tooltip[i] == 'object'){
|
// // tooltip[i].style.zoom = scale
|
// // clearInterval(tooltipTime)
|
// }
|
// }
|
// }
|
// //动态监听当前分辨率是否改变
|
// window.addEventListener('resize',function() {
|
// bodyScale();
|
// })
|
// let tooltipTime = setInterval(() => {
|
// bodyScale();
|
// }, 500);
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.dataBox {
|
width: 100%;
|
height: 100%;
|
.more {
|
width: 23px;
|
height: 23px;
|
background-image: url("~@/assets/images/button/Arrow.png");
|
background-size: 100% 100%;
|
cursor: pointer;
|
margin: 0 auto;
|
}
|
.deleteBut {
|
width: 23px;
|
height: 23px;
|
background-image: url("~@/assets/images/button/delete.png");
|
background-size: 100% 100%;
|
cursor: pointer;
|
margin: 0 auto;
|
}
|
::v-deep .el-table {
|
background-color: rgba(0, 0, 0, 0);
|
border-bottom: 0px;
|
color: #fff;
|
}
|
::v-deep .el-table::before {
|
height: 0px;
|
}
|
::v-deep .el-table thead tr {
|
background-color: rgba(0, 0, 0, 0);
|
background-image: url("~@/assets/images/button/tr.png");
|
background-size: 100% 100%;
|
font-size: 16px;
|
}
|
::v-deep .el-table thead tr th {
|
background-color: rgba(0, 0, 0, 0);
|
border-bottom: 0px;
|
text-align: center;
|
.cell {
|
padding: 0;
|
color: #e1f8ff;
|
}
|
}
|
::v-deep .el-table tbody {
|
tr:nth-child(2n-1) {
|
margin-top: 5px;
|
background-color: rgba(0, 0, 0, 0);
|
border-bottom: 0px;
|
background-image: url("~@/assets/images/button/single.png");
|
background-size: 100% 100%;
|
font-size: 13px;
|
max-height: 30px;
|
}
|
tr:nth-child(2n) {
|
margin-top: 5px;
|
background-color: rgba(0, 0, 0, 0);
|
border-bottom: 0px;
|
background-image: url("~@/assets/images/button/double.png");
|
background-size: 100% 100%;
|
font-size: 13px;
|
max-height: 30px;
|
}
|
tr:hover {
|
margin-top: 5px;
|
background-color: rgba(0, 0, 0, 0);
|
border-bottom: 0px;
|
background-image: url("~@/assets/images/button/hover.png");
|
td {
|
.cell {
|
color: #fff;
|
}
|
}
|
}
|
}
|
::v-deep .el-table tbody tr td {
|
background-color: rgba(0, 0, 0, 0);
|
border-bottom: 0px;
|
text-align: center;
|
.cell {
|
font-size: 14px;
|
padding: 0 2px 0 2px;
|
color: #dbdbdb;
|
}
|
}
|
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
background-color: rgba(0, 0, 0, 0);
|
}
|
::v-deep .el-table {
|
.zdr-row-1{ td { .cell { color: #32db87;}}}
|
.zdr-row-1:hover{ td{ .cell{color: #00FF7F;}}}
|
.zdr-row-2{ td { .cell { color: #8b7fd3;}}}
|
.zdr-row-2:hover{ td{ .cell{color: #8470FF;}}}
|
.zdr-row-3{ td { .cell { color: #db7575;}}}
|
.zdr-row-3:hover{ td{ .cell{color: #FF6A6A;}}}
|
.zdr-row-4{ td { .cell { color: #c9be48;}}}
|
.zdr-row-4:hover{ td{ .cell{color: #FFF68F;}}}
|
.zdr-row-6{ td { .cell { color: #25b2e0;}}}
|
.zdr-row-6:hover{ td{ .cell{color: #00BFFF;}}}
|
}
|
|
::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
|
/* 对应纵向滚动条的宽度 */
|
width: 10px;
|
/* 对应横向滚动条的宽度 */
|
height: 0px;
|
}
|
::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
background-image: url("~@/assets/images/button/scrollBar.png");
|
background-size: 100% 100%;
|
cursor: pointer;
|
}
|
::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
|
background: #41494c;
|
background-size: 100% 100%;
|
}
|
}
|
</style>
|
