根据element-ui官网的描述,通过给table
传入span-method
方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row
、当前列column
、当前行号rowIndex
、当前列号columnIndex
四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan
,第二个元素代表colspan
。 也可以返回一个键名为rowspan
和colspan
的对象。
从这句话我们看出,合并行或者列,使用的方法是在table上传入span-method方法
<el-table
:data="tableData"
:span-method="arraySpanMethod"
border
style="width: 100%">
span-method方法返回一个数组或者对象。
[rowspan, colspan]或者{ rowspan: "", colspan: ""}
rowspan代表行宽或者行距 (垂直方向)
colspan代表栏宽(和并列宽度) (水平方向)
如果想要偶数行第一二三列都合并的话,那么就需要以下修改:
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 3];
} else if (columnIndex === 1 || columnIndex === 2) {
return [0, 0];
}
}
},
相当于原来是
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
偶数行第一二三行合并之后 columnIndex 为0 的列添加 rowspan = 1,colspan =3的属性,其中rowspan=1是默认的,可以省略。
columnIndex 为1和2的列添加rowspan = 0,colspan = 0,即长宽均为0,所以去掉<td></td>
<tr>
<td colspan="3"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…