el-table自定义样式，表头固定，数据过多时滚动
最终结果：（此处没体现出来滚动，数据没那么多）https://i-blog.csdnimg.cn/direct/8197ef89deee4fe59337db51fe89c961.png
1.表头固定，设置表头样式，修改表格背景色
<div class="category-table">
<el-table
ref="tableRef"
class="common-table"
height="100%"
:row-style="{ height: rowHeight + 'px' }"
:header-row-style="{
background: `url(${tableHeader}) center no-repeat !important`,
backgroundSize: `100% 100% !important`,
}"
style="width: 100%; height: 100%; background-color: transparent"
>
</el-table>
</div>
动态设置行高，在获取到数据以后，记得加一个$nextTick()，不然会报错
// 在获取到表格数据后，判断数据长度大于0后调用
this.$nextTick(() => {
this.initRowHeight();
});
// 设置行高
initRowHeight() {
let tableHeight =
Math.round(this.$refs["tableRef"].$el.offsetHeight) -
Math.round(this.$refs["tableRef"].$el.childNodes.offsetHeight);
this.rowHeight = Math.floor(tableHeight / 10); // 返回小于等于最终结果的最大整数
setTimeout(() => {
if (this.$refs.tableRef) {
this.$refs.tableRef.doLayout();
}
}, 1000);
},
2.写在有scoped 的style标签内
/* 显示滚动条 */
.category-table ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
overflow-y: scroll;
}
/* 设置表格的滚动条宽度 */
.category-table >>> .el-table__body-wrapper::-webkit-scrollbar {
width: 10px;
height: 8px;
}
/*定义滚动条轨道 内阴影+圆角*/
.category-table >>> .el-table__body-wrapper::-webkit-scrollbar-track {
border-radius: 8px;
background-color: transparent;
}
/*定义滑块 内阴影+圆角*/
.category-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 8px;
box-shadow: inset 0 0 6px rgba(200, 209, 217, 0.3);
background-color: rgba(76, 77, 77, 0.1);
} 3.公共的scss样式文件内，没有公共样式文件的话可以放在没有scoped的style标签内，有的话要包管在main.js里引入了
/* el-table表格组件样式 */
.common-table {
/* 表格加载中的背景 */
.el-loading-mask {
background-color: transparent;
}
/** 设置表格暂无数据样式 */
.el-table__empty-block {
background-color: transparent;
color: #a8bfd5;
letter-spacing: 2px;
}
/** 修改表头多选样式 */
.el-checkbox__inner {
background-color: transparent;
}
.el-checkbox__inner:hover {
border: 1px solid #6d90ae;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #1173be;
}
/* 设置表头样式 */
&.el-table .el-table__header-wrapper th {
color: #85b4e6;
font-weight: normal;
font-size: var(--font-size-base);
letter-spacing: 2px;
background-color: transparent !important;
background: url("/images/imagine/table-header.png") center no-repeat;
background-size: 100% 100%;
border-bottom: 1px solid #0b4f85;
box-sizing: border-box;
}
/** 设置表格的行背景色 */
.el-table__row {
background: url("/images/imagine/table-row1.png") center no-repeat;
background-size: 100% 100%;
}
/** 去掉每一行的底边border */
&.el-table td.el-table__cell {
color: #aec4da;
border-bottom: 1px solid #0b4f85;
font-size: var(--font-size-base);
letter-spacing: 2px;
}
/* 修改表格上侧和左侧的border */
&.el-table--border,
&.el-table--group,
/* 修改表格右侧和底侧的border */
&.el-table--border:after,
&.el-table--group:after,
&.el-table:before {
border-color: transparent;
}
/* 删除表格右侧的border */
&.el-table--border::after {
width: 0;
}
/** 设置表格左侧第一列的边 */
&.el-table td.el-table__cell:first-child {
border-left: 1px solid #0b4f85;
}
/** 去掉表格的底边border */
&.el-table::before {
height: 0;
}
/** 去掉表格头部的border */
&.el-table--border {
border: none;
}
/** 表格内部每一列右侧border */
&.el-table--border .el-table__cell {
border-right: 1px solid #0b4f85;
}
/** 表格行的鼠标滑过样式 */
&.el-table tbody tr:hover>td {
background: url("/images/imagine/table-row2.png") center no-repeat !important;
background-size: 100% 100% !important;
}
/* 去掉表格滚动条那一列的border */
&.el-table--border th.el-table__cell.gutter:last-of-type {
border-bottom-width: 0;
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]