
<el-table ...>
...
<el-table-column :render-header="renderheader" label="动用地质<br/>储量" align="center"></el-table-column>
<el-table-column :render-header="lineRenderheader" label="计算目前工作量和技术条件下技术可采储量<line/>(10⁸m³)" align="center"></el-table-column>
</el-table>
renderheader(h, { column, $index }) {
let splitArr = column.label.split("<br/>")
return h("div", {}, splitArr.map(el => h("div", {}, el)));
},
lineRenderheader(h, { column, $index }) {
let splitArr = column.label.split("<line/>");
return h("div", {
class: 'head-cell-column',
}, [
h("div", {
style: 'height:161px;display:flex;align-items:center;border-bottom:1px solid #bee0ef;'
}, splitArr[0]),
h("div", {}, splitArr[1]),
]);
<style lang="scss" scoped>
::v-deep .ele-table {
// 通过子选择父元素
.cell:has(> .head-cell-column) {
padding: 0!important;
height: 100%;
}
.head-cell-column {
height: 188px;
display: flex;
flex-direction: column;
justify-content: space-between;
.top-cell {}
}
}
</style>