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列高度变成0row[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];}}},}
