H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【element-ui】element ui table 列合并问题

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

return [1, 2];

} else if (columnIndex === 1) {

return [0, 0];

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

回答:

根据element-ui官网的描述,通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspancolspan的对象。

从这句话我们看出,合并行或者列,使用的方法是在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>

本文地址:H5W3 » 【element-ui】element ui table 列合并问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址