一、前言

这是在老东家遇到的一个问题，当时做的项目是管理后台，table表格肯定用的特别多。我把遇到的这个问题之前记录了一下，今天搬过来，供大家参考。希望对大家有所帮助。

设计师给了一个table表格的原图，如下图：

PS：注意看红色圈起来的，表头“项目名称” 需要横跨2列

因为项目使用的是elementui的框架，表格用el-table已经渲染完成。居然在表头设置跨列的时候栽了跟头。

翻了官方文档，也没看到哪个属性跟方法与之相关；多少有点关系的就是多表头设置，可惜不符合。文档看不出来什么，只能靠度娘了，搜了半天全是与多表头相关的，最后看到了一篇操作dom元素的，才有了灵感。

二、代码奉上

<el-table
  v-loading="tableLoading"
  element-loading-background="rgba(40,43,50, 0)"
  :data="tableData"
  border
  :header-cell-class-name="theadSpan"
>
  <template slot="empty">
    <p>{{ tabelEmpty }}</p>
  </template>
  <el-table-column
    v-for="col in columns"
    :key="col.id"
    :prop="col.id"
    :label="col.label"
    :min-width="col.width"
  />
</el-table>

PS：

1. 在data定义了columns变量存放表头数据
2. 给table设置了header-cell-class-name属性，并通过theadSpan方法返回className（重点：这里跟表头跨列的有联系，可以往后看，有代码！！！！！！！！）

1.columns变量示例

data() {
	return {
	  columns: [
	    {
	      id: 'name',
	      label: '项目名称',
	      width: '100'
	    },
	    {
	      id: 'code',
	      label: '项目编码',
	      width: '100'
	    },
	    {
	      id: 'orgName',
	      label: '组织',
	      width: '100'
	    },
	    {
	      id: 'attributeName',
	      label: '项目属性',
	      width: '100'
	    },
	    {
	      id: 'online',
	      label: '是否上线',
	      width: '100'
	    },
	    {
	      id: 'comment',
	      label: '备注',
	      width: '100'
	    }
	  ]
	}
}

2.表头跨列实现（PS：重点！重点！重点！）

1. 在method定义theadSpan方法
2. dom渲染完成之后 执行setColSpan方法

mounted() {
  // dom渲染完成后 操作表头合并
  this.$nextTick(() => {
    this.setColSpan()
  })
},
methods: {
  setColSpan() {
    var x = document.querySelector('.colSpan')
    var x1 = document.querySelector('.hideTh')
    // 将第一列表头单元格的colSpan设为2
    x.colSpan = 2
    // 将第二列表头单元格的隐藏
    x1.style.display = 'none'
  },
  // 给第一列、第二列表头 返回 相应class
  theadSpan({ row, column, rowIndex, columnIndex }) {
    if (rowIndex === 0) {
    	// 给第一列表头的dom添加class='colSpan'
      if (columnIndex === 0) {
        return 'colSpan'
      }
      // 给第二列表头的dom添加class='hideTh'
      if (columnIndex === 1) {
        return 'hideTh'
      }
    }
  }
}

不重要的吐槽：

这样看，代码的确没多少就实现了功能，就是逼不得已，还需要操作dom元素才能完成。

总结

Element中table表格如何让表头跨列实现完成了，如果有其他比较好的方法，可以共享，相互学习~~~~共勉之~