vxe-table表头合并，是否可以支持colspan和rowspan

[mdxiaohu]

这个需求解决了什么问题：

我查阅了vxe-table的相关issue，包括gitee，发现之前有人提过类似的问题，但是都没有回应。

现有的表格API可以对表头进行分组，可是不能像内容一样进行相关的表格合并。

使用表头分组方式，从控制台可以看到，表格加入了colspan的属性。

我们的目标是想实现如下的效果，例如：

我查阅了API，有这样一个方法，span-method。

它可以对表格的内容进行合并，但是无法拿到表头的合并数据。

建议的 API 是什么样的：

是否可以开放，表头合并相关的API，例如这样的：head-method

目前，我不太清楚，这个提议是否合理。

当然，或许你有更好的办法。

是否已有其他不错的替代方案：

暂时没有，不知道使用渲染器相关的API是否可以解决此类需求，我还在尝试。

[xuliangzhan]

目前是不支持表头合并的

[mdxiaohu]

好的，非常感谢，我再考虑下其他的可行性方案。

[H402861965]

害~我也需要这个功能

[bygsn]

现在也不支持表头合并吗

[CassieLiu6]

我也需要这个功能， 后续会列入到计划里面吗

[MrOhyang]

// 这是一段狗皮膏药，用来支持 vxe-table 不支持的 th 设置 colspan=2 的逻辑
mounted() {
  const tableDom = this.$el.querySelectorAll('table')?.[0]
  const handler = (mutationList, observer) => {
    const tableDom = this.$el.querySelectorAll('table')?.[0]
    const oneTh = tableDom?.querySelectorAll('tr th')?.[0] // colspan=2 的列
    const twoTh = tableDom?.querySelectorAll('tr th')?.[1] // 需要被隐藏的列
    if (mutationList.find(item => item.attributeName === 'colspan')) {
      if (oneTh && oneTh.getAttribute('colspan') !== '2') {
        oneTh.setAttribute('colspan', 2)
      }
      return
    }
    if (oneTh) {
      oneTh.setAttribute('colspan', 2)
    }
    if (twoTh) {
      twoTh.style.display = 'none'
    }
  }
  const observer = new MutationObserver(handler)
  observer.observe(tableDom, { attributes: true, childList: true, subtree: true })
}

贴了一段狗皮膏药，病好了，然后跟产品说一下，不好实现，产品说 ok，然后用其他方案去代替，然后撕掉狗皮膏药。

[mdxiaohu]

@MrOhyang

可用就行，产品和领导可不管怎么实现的，只要看着没问题就能过~

[yzy9527]

尽量不要操作dom,其实通过修改配置就可以解决，完美操作合并各种表头合并

[botshen]

尽量不要操作dom,其实通过修改配置就可以解决，完美操作合并各种表头合并

怎么修改

[yzy9527]

尽量不要操作dom,其实通过修改配置就可以解决，完美操作合并各种表头合并

怎么修改

headerCellClassName回调修改rowSpan或colSpan,再将不需要的单元格使用css隐藏就可以了