vue+element ui的table动态合并

vue+element ui的table动态合并_第1张图片

vue+element ui的table动态合并_第2张图片

2021年8月5日动态合并更改(因上面的方法在实际开发中还存在显示混乱问题)

前提条件:

后台返回数据的同时,返回合并行数 rowspan 以及 该行是否需要合并字段firstRowFlag

    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (row.firstRowFlag) {
          return {
            rowspan: row.rowSpan,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }

 

2021年12月8日补充:

关于 首行 firstRowFlag 和 首行占据行数 rowSpan的定义,亦可以在接收后台数据之后,在前端对数据进行处理,增加相对应字段。

你可能感兴趣的:(前端每日一坑,vue.js,ui,elementui)