elmentUI table表格，表头合并、表格内数据合并单元格

这几天写了一个表格，表头要实现合并两个单元格，第一列数据全部合并，翻了下element-ui的属性方法，没找到好一点的合并表头的方法，也不想原生写一个table表，所以找了一个死办法来实现，不过这个方法

仅限于表格列数据不固定(fixed)的情况，使用合并单元格的方法，列固定的会失效

合并表头，第一列

直接贴全部代码了，注释也全部写在代码里了

<el-table border :data="toolTableData" :span-method="objectSpanMethod" height="400">
  <el-table-column align="center" width="55" prop="id" label="项目"/>
  <el-table-column align="center" width="120" prop="name" label="项目"/>
  <el-table-column align="center" width="160" prop="amount1" label="24小时降水总量(mm)"/>
  <el-table-column align="center" width="160" prop="amount2" label="12小时降水总量(mm)"/>
</el-table>

data(){
	return{
		toolTableData: [
        {
          id: '降水强度的等级划分',
          name: '小雨、阵雨',
          amount1: '0.1-9.9',
          amount2: '≤4.9'
        }, 
        {
          id: '降水强度的等级划分',
          name: '小雨-中雨',
          amount1: '5.0-16.9',
          amount2: '3.0-9.9',
        }, 
        {
          id: '降水强度的等级划分',
          name: '中雨',
          amount1: '10.0-24.9',
          amount2: '5.0-14.9'
        }, 
        {
          id: '降水强度的等级划分',
          name: '中雨—大雨',
          amount1: '17.0-37.9',
          amount2: '10.0-22.9'
        }, 
        {
          id: '降水强度的等级划分',
          name: '大雨',
          amount1: '25.0-49.9',
          amount2: '15.0-29.9'
        },
        {
          id: '降水强度的等级划分',
          name: '大雨—暴雨',
          amount1: '33.0-74.9',
          amount2: '23.0-49.9',
        }, 
        {
          id: '降水强度的等级划分',
          name: '暴雨',
          amount1: '50.0-99.9',
          amount2: '30.0-69.9'
        }, 
        {
          id: '降水强度的等级划分',
          name: '暴雨—大暴雨',
          amount1: '75.0-174.9',
          amount2: '50.0-104.9'
        }, 
        {
          id: '降水强度的等级划分',
          name: '大暴雨',
          amount1: '100.0-249.9',
          amount2: '70.0-139.9'
        }, 
        {
          id: '降水强度的等级划分',
          name: '大暴雨—特大暴雨',
          amount1: '175.0-299.9',
          amount2: '105.0-169.9'
        }, 
        {
          id: '降水强度的等级划分',
          name: '特大暴雨',
          amount1: '≥250.0',
          amount2: '≥140.0'
        }
      ],
	}
}


method:{
	// 合并表格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
      	//将第一列的rowspan设为11
        if (rowIndex == 0) {
          return {
            rowspan: 11,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    // 合并表头
    setColSpan() {
      // 获取表头的所有单元格
      var x = document.getElementsByClassName("el-table__header")[0].rows[0].cells
      // 将第一列表头单元格的colSpan设为2
      x[0].colSpan = 2
      // 将第二列表头单元格的display设为none
      x[1].style.display = 'none'
    },
}

合并几行几列

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 第一行合并所有列
      if (rowIndex == 0) {
        return [1, 5]
      }
      if (columnIndex === 3) {
        // 每三行合并两列,要合并的数量也可动态变化
        if ((rowIndex - 1) % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 2
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }