table表格的合并


如上图,实现单元格合并功能,不多说,直接上代码

一,添加    :span-method="objectSpanMethod"

<el-table
     :key="timer1"
     :data="tableData"
     :span-method="objectSpanMethod"
     style="width: 100%"
     cell-class-name="cellStyle"
     highlight-current-row
 >

二,objectSpanMethod方法计算合并

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) { //第一列 下标为0
          if (rowIndex === 0) {  //第一列下的第一行 下标为0  
            return {
              rowspan: 4,  //向下合并4个
              colspan: 1
            };
          }else{          //其他的不变
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }else if(columnIndex === 4){ //第四列也需要合并 同理
          if (rowIndex === 0) {
            return {
              rowspan: 4,
              colspan: 1
            };
          }
        }else if(columnIndex === 5){  //第五列也需要合并 同理
          if (rowIndex === 0) {
            return {
              rowspan: 4,
              colspan: 1
            };
          }
        }
      },

 

第二种情况:每一列都有两个合并行  方法类似,无非每一列多了一个行的合并

 

objectSpanMethod_two({ row, column, rowIndex, columnIndex }){
        if (columnIndex === 0) { //第一列
          if (rowIndex === 0) { //第一行 需要合并4个单元格
            return {
              rowspan: 4,
              colspan: 1
            };
          }else if (rowIndex === 4){ //第四行,需要合并下面四个单元格
            return {
              rowspan: 4,
              colspan: 1
            };
          }else {             //其他不变这个一定不能漏了 return {
              rowspan: 0,
              colspan: 0
            };
          }
        }else if(columnIndex === 4){
          if (rowIndex === 0) {
            return {
              rowspan: 4,
              colspan: 1
            };
          }else if (rowIndex === 4){
            return {
              rowspan: 4,
              colspan: 1
            };
          }
        }else if(columnIndex === 5){
          if (rowIndex === 0) {
            return {
              rowspan: 4,
              colspan: 1
            };
          }else if (rowIndex === 4){
            return {
              rowspan: 4,
              colspan: 1
            };
          }
        }
      },

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM