2024年3月5日发(作者：)

table表格单元格合并

1、合并表头

第一种方法

利用table的 :header-cell-style属性

:data="tableData"

height="400px"

max-height="400px"

size="small"

:header-cell-style="headerStyle"

fit

>

methods: {

headerStyle({ row, rowIndex }) {

(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属性

:data="tableData"

:span-method="arraySpanMethod"

style="width: 100%"

>

methods: {

arraySpanMethod({ row, column, rowIndex, columnIndex }) {

(row,column,rowIndex,columnIndex);

if (rowIndex === 1) {

//第2行

if (columnIndex === 2) {

//第3个开始

return [2, 2];

//第一个参数是高,第二个参数是宽

} else if (columnIndex === 1) {

//第2个开始

return [0, 0];

}

}

},

}