element ui table 列合并问题

Question

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {

return [1, 2];

} else if (columnIndex === 1) {

return [0, 0];

}
},
官网给你的案例可以实现第一列和第二列合并，要是第一二三列都合并的话该怎么修改？可以的话必然点赞！

Answer 1

根据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>