element-ui+vue el-table表头以及表格合并

element-ui+vue el-table表头以及表格合并

需要达到的效果(有三个开标室,两个评标室,一个评审室将相同类型的表格合并)

放到methods中:

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    if (rowIndex ==0) {
      return {
        rowspan: 3,
        colspan: 1
      };
    }else if(rowIndex ==3 ) {
      return {
        rowspan:2,
        colspan:1
      }
    }else if(rowIndex == 5){
      return {
        rowspan:1,
        colspan:1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
}

这里的rowIndex ==0 就是从下标零开始合并三个,rowIndex ==3 就是下标从3开始合并两个的意思,到时候可以根据个人的数据情况自行进行调整.

合并表头例如要达到以下的效果


多套几层即可,详情可以看element-ui文档