在表格外面必须要加一层div,用来进行样式穿透
<template>
<el-dialog
:title="title"
:visible.sync="detailVisible"
@close="cancel"
class="my-dialogclass"
append-to-body
>
<div class="table-wrapper">
<el-table :data="wgDataList" :height="height" class="syslog-top">
<el-table-column
prop="empId"
:show-overflow-tooltip="true"
label="工号"
></el-table-column>
<el-table-column
prop="empName"
:show-overflow-tooltip="true"
label="姓名"
></el-table-column>
<el-table-column
prop="sex"
:show-overflow-tooltip="true"
label="性别"
></el-table-column>
<el-table-column
prop="callPhone"
:show-overflow-tooltip="true"
label="手机号"
></el-table-column>
<el-table-column
prop="empCategory"
:show-overflow-tooltip="true"
label="岗位"
></el-table-column>
<el-table-column
prop="deptFullName"
:show-overflow-tooltip="true"
label="所属机构"
></el-table-column>
<el-table-column
prop="enterDate"
:show-overflow-tooltip="true"
label="入行时间"
></el-table-column>
<el-table-column
prop="empType"
:show-overflow-tooltip="true"
label="人员类型"
></el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button type="text" @click="handWg(scope.row)">查 看</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div slot="footer" class="dialog-footer">
<el-button
style="background: #071d4a; color: #ddd; border: none"
@click="cancel()"
>关 闭</el-button
>
</div>
</el-dialog>
</template>
<script>
export default {
name: "indexAllPerson",
props: {
_detailVisible: {
type: Boolean,
default: false,
},
wgDataList: {
type: Array,
default: false,
},
width: {
type: String || Number,
default: "1200px",
},
height: {
type: String || Number,
default: "400px",
},
},
data() {
return {
form: {},
detailVisible: false,
title: "异常人员信息",
dealTypeOptions: [],
};
},
created() {
// this.getDicts("deal_type").then((response) => {
// this.dealTypeOptions = response.data;
// });
},
methods: {
// 提交
formSubmit() {},
// 关闭console.log(newValue)
cancel() {
let _this = this;
this.detailVisible = false;
_this.$emit("dialogVisibleAdd", false);
// this.detailVisible = false;
// this.$emit("update:_detailVisible", false);
},
},
watch: {
_detailVisible(newValue) {
this.detailVisible = newValue;
},
},
};
</script>
<style lang="scss" scoped>
.my-dialogclass .el-dialog {
background: #071e4bcc !important;
}
// 去除表格滚动条
.my-dialogclass.el-table--scrollable-y
.el-table__body-wrapper::-webkit-scrollbar {
width: 0;
}
</style>
<style lang='scss' scoped>
.table-wrapper {
height: 80%;
margin-top: 10px;
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #071e4bcc;
color: #fff;
}
//鼠标悬浮右背景颜色去掉
::v-deep.el-table tbody tr.el-table__row:hover > td {
background-color: unset;
}
::v-deep.el-table__body tr.hover-row > td.el-table__cell {
background-color: unset;
}
}
/* 删除表格下横线 */
.table-wrapper ::v-deep .el-table::before {
left: 0;
bottom: 0;
width: 100%;
height: 0px;
}
.table-wrapper ::v-deep .el-table,
.el-table__expanded-cell {
background-color: transparent;
}
.table-wrapper ::v-deep .el-table tr {
background-color: transparent !important;
}
.table-wrapper ::v-deep .el-table th {
background-color: transparent !important;
border-bottom: 1px solid transparent;
color: #fff;
font-size: 18px;
}
.table-wrapper ::v-deep .el-table td,
.el-table th.is-leaf {
border-bottom: none !important;
color: #fff;
font-size: 18px;
}
</style>
来源 https://blog.csdn.net/weixin_44283571/article/details/112306435
