element table动态合并行、列

以上面表格举例，表格需要以服务为主体显示，并且服务的数量不确定，表格数据是 资料对象集合，假设表格数据是按照服务名排序，如下

this.informationData = [
	{
	  service: '服务1',
	  name: '营业执照',
	  description: 'u一卡通一会发到付v但是v的',
	  check: false
	},
	{
	  service: '服务1',
	  name: '营业执照',
	  description: 'u一卡通一会发到付v但是v的',
	  check: false
	},
	{
	  service: '服务1',
	  name: '营业执照',
	  description: 'u一卡通一会发到付v但是v的',
	  check: false
	},
	{
	  service: '服务2',
	  name: '营业执照',
	  description: 'u一卡通一会发到付v但是v的',
	  check: false
	},
	{
	  service: '服务2',
	  name: '营业执照',
	  description: 'u一卡通一会发到付v但是v的',
	  check: false
	},
	{
	  service: '服务3',
	  name: '营业执照',
	  description: 'u一卡通一会发到付v但是v的',
	  check: false
	},
	{
	  service: '服务3',
	  name: '营业执照',
	  description: 'u一卡通一会发到付v但是v的',
	  check: false
	},
	{
	  service: '服务3',
	  name: '营业执照',
	  description: 'u一卡通一会发到付v但是v的',
	  check: false
	},
	{
	  service: '服务3',
	  name: '营业执照',
	  description: 'u一卡通一会发到付v但是v的',
	  check: false
	},
	{
	  service: '服务3',
	  name: '营业执照',
	  description: 'u一卡通一会发到付v但是v的',
	  check: false
	},
]

通过遍历表格数据收集到每一种服务的开始下标以及资料个数,如下

this.columnList = [
  {
    index: 0, /* 该种服务的第一个资料下表 */
    num: 3 /* 该种服务的所有资料数量 */
  },
  {
    index: 3,
    num: 2
  },
  {
    index: 5,
    num: 5
  }
]

表格

<el-table
  :data="informationData"
  :span-method="objectSpanMethod"
  border>
  <el-table-column prop="service" label="服务" min-width="180"></el-table-column>

  <el-table-column prop="name" label="资料名称" min-width="180"></el-table-column>

  <el-table-column prop="description" label="追加描述" min-width="180"></el-table-column>

  <el-table-column prop="check" label="收齐" min-width="180"></el-table-column>

</el-table>

objectSpanMethod方法

objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
  let arr = this.columnList.filter(item => item.index == rowIndex)
  if (columnIndex == 0 && arr.length) {
    return {
      rowspan: arr[0].num,
      colspan: 1
    }
  } 
  else if (columnIndex == 0 && !arr.length) {
    return {
      rowspan: 0,
      colspan: 0
    }
  }
}

效果

动态合并列，效果如下

在上面的基础上对表格数据进行了多次封装，并且在element table的span-method中也加了处理

watch: {
 informationList: {
   handler (list) {
     /* ids: 所有的服务id集合 */
     let ids = list.map(item => {
       return item.serviceTempleteId
     })
     ids = [...new Set(ids)]
     /* arr: 根据服务id，创建添加资料对象，每个服务都需要一个 添加资料 对象 */
     let arr = ids.map(item => {
       return {
         serviceTempleteId: item,
         seviceMaterialName: '添加资料'
       }
     })
     /* arr2: 合并资料集合 与 ‘添加资料’集合 */
     let arr2 = list.concat(arr)

     /* arrobj: 分组，以服务id为key将对应的资料归为一组 */
     let arrObj = {}
     arr2.forEach(item => {
       if (arrObj[item.serviceTempleteId]) {
         arrObj[item.serviceTempleteId].push(item)
       } else {
         arrObj[item.serviceTempleteId] = [item]
       }
     })

     /* arr3: 将分组后的资料再合并为一个数组，得到最终需要的格式的数组 */
     let arr3 = []
     for(let key in arrObj) {
       arr3 = arr3.concat(arrObj[key])
     }

     this.columnList = []
     arr3.forEach((item, index) => {
       if (!item.check) item.check = false
       item.description = ''
       let arr = this.columnList.filter(el => el.id == item.serviceTempleteId)
       if (arr.length) {
         this.columnList.filter(el => el.id == item.serviceTempleteId)[0].num++
       } else {
         this.columnList.push({
           id: item.serviceTempleteId,
           index: index,
           num: 1
         })
       }
     })
     this.informationData = JSON.parse(JSON.stringify(arr3))
   },
   deep: true
 }
}

objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
  let arr = this.columnList.filter(item => item.index == rowIndex)
  if (columnIndex == 0 && arr.length) {
    return {
      rowspan: arr[0].num,
      colspan: 1
    }
  } 
  else if (columnIndex == 0 && !arr.length) {
    return {
      rowspan: 0,
      colspan: 0
    }
  } else if (columnIndex == 1) {
    let arr = this.columnList.map(item => {
      return item.index + item.num - 1
    })

    if (arr.includes(rowIndex)) {
      return {
        rowspan: 1,
        colspan: 3
      }
    }
  }
}