element表格表头合并(多级合并)

分类: 英国365bet官方 发布时间: 2025-08-17 14:04:38 作者: admin 阅读: 1148

需求:在多级后面合并行和列

官方是按层级一层一层套,但是没有多级表头后面合并的案例,于是参考官网header-cell-style属性,可以自定义合并行或列

首先:按照官网给出的例子我们先把数据渲染成这样

然后根据header-cell-style属性编辑携带的参数编辑(也可以根据rowIndex、columnIndex自定义,rowSpan表示占高(行)、colSpan表示占宽(列))

headerStyle({ row, rowIndex }) {

// console.log(row, column, rowIndex, columnIndex);

if (rowIndex == 0) { // 把第1行的第2、3列变为占两行高度的表格

row[1].rowSpan = 2;

row[2].rowSpan = 2;

}

if (rowIndex == 1) { // 第2行的原本第2行的1、2、3、4列高度变成0

row[1].rowSpan = 0;

row[2].rowSpan = 0;

row[3].rowSpan = 0;

row[4].rowSpan = 0;

}

},

附单页完整代码: