element table表格合并行和列

element-ui 官网案例: table合并行或列

 

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

    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        sortable
        label="数值 1">
      </el-table-column>
      <el-table-column
        prop="amount2"
        sortable
        label="数值 2">
      </el-table-column>
      <el-table-column
        prop="amount3"
        sortable
        label="数值 3">
      </el-table-column>
    </el-table>

element-ui中table表格合并的各参数的意义

1. 有4个参数返回:row,column,rowIndex,columnIndex;

row和column是表格的行和列,里面是当前行和列的值,也就是tableData里的值,

rowIndex,columnIndex是当前行和列的序号

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
   if (columnIndex === 0) {    //用于设置要合并的列
     if (rowIndex % 2 === 0) {   //用于设置合并开始的行号
       return {
         rowspan: 2,     //合并的行数
         colspan: 1          //合并的列数,设为0则直接不显示
       };
     } else {
       return {
         rowspan: 0,
         colspan: 0
       };
     }
   }
 }

2.表格合并行和列注释  if (rowIndex % 2 === 0) { // 用于设置合并开始的行号

if (columnIndex === 0) {
	if (rowIndex === 0) {  // 合并第一行到第四行,从第一行开始,共4行
	  return {
	    rowspan: 4,
	    colspan: 1
	  }
	} else if (rowIndex === 4) { // 合并第五行到第九行,从第五行开始,共5行
	  return {
	    rowspan: 5,
	    colspan: 1
	  }
	} else if (rowIndex === 9) { //  合并第10行到第14行,从第10行开始,共5行
	  return {
	    rowspan: 5,
	    colspan: 1
	  }
	} else { // 其余被合并的行,诸如1、2、3、5、6、7、8、10、11、12、13全都设为0
	  return {
	    rowspan: 0,
	    colspan: 0
	  }
	}
}

  • 1
    点赞
  • 4
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论

打赏作者

残忆2迷惘

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值