element plus 复合表头怎么能够上宽下窄?

发布于
2024-12-04 山东

我的代码现在页面效果如下：

看A2 列和 A3 列及其子列，现在是 A2,A3 占用了一行的高度，下面子列占用了两行的高度，但是我现在想要的是让 A2，A3 占用两行高度，下面子列占用一行，应该是怎么改呢？

列配置代码如下：

<el-table-column label="Q"  ></el-table-column>
        <el-table-column label="A1"  >
          <el-table-column label="A1B1" >
            <el-table-column label="A1B1C1" />
            <el-table-column label="A1B1C2"  />
            <el-table-column label="A1B1C3"  />
          </el-table-column>
          <el-table-column label="A1B2" >
            <el-table-column label="A1B2C1" />
            <el-table-column label="A1B2C2"  />
            <el-table-column label="A1B2C3"  />
          </el-table-column>
          <el-table-column label="A1B3" >
            <el-table-column label="A1B3C1" />
            <el-table-column label="A1B3C2"  />
            <el-table-column label="A1B3C3"  />
          </el-table-column>
        </el-table-column>

        <el-table-column label="A2"  >
          <el-table-column label="A2C1" />
          <el-table-column label="A2C2"  />
          <el-table-column label="A2C3"  />
        </el-table-column>

        <el-table-column label="A3"  >
          <el-table-column label="A3C3" />
          <el-table-column label="A3C3"  />
          <el-table-column label="A3C3"  />
        </el-table-column>

element-plus

阅读 10.9k

2 个回答

得票最新

hfhan

28.9k72241

发布于
2024-12-04 安徽

更新于
2024-12-05

✓ 已被采纳

没有直接的办法可以进行这样设置。下面方法可以实现，但是不保证稳定性，也不知道有没有其他副作用。

查看element的源码utils-helper，可以看到对于table-column，在第几层，其level值就是几，有子级table-column的话，设置其rowSpan就是1，反之（最底层table-column）占用剩余的rowSpan，这就是为什么最后一行是合并的，其他行不是。

再查看源码table-header，这是渲染header的代码，是遍历columnRows（就是上面源码返回的rows）生成tr，这里可以看到有对td设置rowspan，但是这个rowspan是直接在上面源码里生成的，没有暴露出来，所以需要想办法设置下这个column.rowSpan就可以了。通过源码，我们看到，在使用column.rowSpan前，使用了函数getHeaderCellClass，这是table上的header-row-class-name属性，所以我们可以另辟蹊跷，在header-row-class-name中对column进行设置，来达到这个业务逻辑。

首先是第三层table-column的rowspan要设置为1，这个就需要让他在第三层，所以需要在A2、A3上加个第二层，同时又要让新加的第二层隐藏（可以设置rowspan为0），第一层的rowspan为2，这里我加了一个跟第一层同名的第二层table-column，最终代码如下，你也可以设置成别的，只要可以在代码逻辑中找到第一层和第二层，并设置他们的rowspan就行

// A2举例
<el-table-column label="A2"  >
  <el-table-column label="A2"  >
      <el-table-column label="A2C1" />
      <el-table-column label="A2C2"  />
      <el-table-column label="A2C3"  />
    </el-table-column>
</el-table-column>

const handleHeader = (props) => {
  let column = props.column
  let flag = column.label === 'A2' || column.label === 'A3'
  if(column.level === 1 && flag){
    column.rowSpan = 2
-  }else if(column.leve2 === 1 && flag){
+  }else if(column.level === 2 && flag){
    column.rowSpan = 0
  }
}