自定义el-table表头`render-header`

27 阅读1分钟

Snipaste_2024-06-18_10-26-27.png

<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>
// 表格 header样式
renderheader(h, { column, $index }) {
  let splitArr = column.label.split("<br/>")
  return h("div", {}, splitArr.map(el => h("div", {}, el)));
},
// 表格header样式
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>