效果图
代码:
1.第一部分:表格固定行:用合计行来实现
<el-table
class="fixedRowcol"
:data="tableData"
border
show-summary
sum-text="合计"
ref="table"></el-table>
2.第二部分:表格固定列加按钮,watch实现
watch: {
tableData() {
let _this = this;
this.$nextTick(() => {
console.log(_this.$refs.table.$refs);
let html = _this.$refs.table.$refs.rightFixedFooterWrapper
.querySelector(".el-table__footer")
.querySelectorAll("td")[6]
.querySelector(".cell");
html.innerHTML = "<el-button>查看</el-button>";
html.onclick = () => {}
});
},
},
3.第三部分:style样式修改(根据element-ui table的各个部分实现方式,层级结构)
:deep(.el-table.fixedRowcol) {
display: flex;
flex-direction: column;
.el-table__body-wrapper{
order: 1;
height: calc(100% - 76px) !important;
}
.el-table__footer-wrapper{
min-height: 32px;
display: flex !important;
td.el-table__cell{
div{
white-space: nowrap;
}
}
}
.el-table__fixed-body-wrapper {
top: 76px !important;
height: calc(100% - 76px) !important;
}
.el-table__fixed-footer-wrapper {
display: block !important;
z-index: 4;
top: 42px !important;
td.el-table__cell{
div{
white-space: nowrap;
}
}
}
}