table表格单元格合并

table表格单元格合并
1、合并表头
第一种方法
利用table的 :header-cell-style属性
<el-table
:data="tableData"
height="400px"
max-height="400px"
size="small"
:header-cell-style="headerStyle"
fit
>
methods: {
headerStyle({ row, rowIndex }) {
console.log(row, rowIndex);
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 = 2;
row[2].rowSpan = 3;
row[3].rowSpan = 3;
row[4].rowSpan = 3;
}
},
//第二种办法
headerStyle({ row, rowIndex }) {
if (rowIndex === 1) { //隐藏另外领两个头部单元格return { display: 'none' }
}
},
},
第二种方法
利用官网提供的el-table-column互相嵌套
2、普通单元格合并
利用table的:span-method属性
<el-table
:data="tableData"
:span-method="arraySpanMethod"
style="width: 100%"
>
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
console.log(row,column,rowIndex,columnIndex);
if (rowIndex === 1) { //第2行
if (columnIndex === 2) { //第3个开始
return [2, 2]; //第一个参数是高,第二个参数是宽
} else if (columnIndex === 1) { //第2个开始
return [0, 0];
}
}
},
}。