Element表格表头合并技巧

初始状态

初始代码

1-1、表头的多项

1-2 代码

<el-table :data="tableData" border style="width: 100%">
    <el-table-column label="基础信息" width="180">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
     </el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

2-1 表头的合并

ps:将表头的姓名和日期合并为一个表头 为基本信息

解释：

rowIndex代表当前行号（行索引），columnIndex 代表当前列号（列索引）
比如说表头是第一行，行号是0，表头第一行第一列，行号和列号都是0

rowspan规定单元格可占据的行数
colspan属性规定单元格可横跨的列数

2-2 代码

<el-table :data="tableData" :header-cell-style="headerCellStyle" border style="width: 100%">
     <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
 </el-table>


 headerCellStyle({ row, column, rowIndex, columnIndex }) {
      row[0].colSpan = 0;  //日期的表头所占的列数为零
      row[1].colSpan = 2;  //姓名的表头所占的列数为零
      if (columnIndex === 0) {  //日期所在的列
        return { display: 'none' }   //隐藏日期的表头，姓名的表头会向前位移并占两个
      }
 }

3-1 表体的合并

将姓名一列，相同的单元格合并

ps:合并的关键是计算表体的15个单元格，每个格子是不是需要多占格子或者少占格子。

比如说我想让[ 0, 1 ]的格子向下再占1格，此后[ 1,1]都要隐藏

<el-table :data="tableData" border :span-method="spanMethod" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
 </el-table>

getSpanArr() {
      let pos = 0
      this.spanArr = []
      for (let i = 0; i < this.tableData.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          pos = 0
        } else {
          if (this.tableData[i].name === this.tableData[i - 1].name) {
            this.spanArr[pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            pos = i
          }
        }
      }
    }

以上的js代码是通过计算数据的重复数据(也就是需要合并的重复数据，王小虎2个，王小龙3个)，

ps:此方法需要获取数据后立即调用

spanArr结果就是[ 2 , 0, 3, 0, 0 ],

而span-method方法的四个参数 row, column, rowIndex, columnIndex

row  每行的数据

column  每个表体单元格的数据

rowIndex, columnIndex  每个单元格在表体的位置索引

    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        let r = this.spanArr[rowIndex]
        let c = this.spanArr[rowIndex] > 0 ? 1 : 0
        return [r, c];
      }
    },

此方法的计算第二列，也就是姓名的那一列，每个单元格需要占的单元格

[ r , c ] 所有的数据就是 [ 2,1 ] [ 0,0 ] [ 3,1 ] [ 0,0 ] [ 0,0 ]

以上就能满足我们最开始的要求

4-1合并指定的两个单元格

将[ 0,0] 和 [ 0,1 ] 合并为一个单元格

spanMethod({ row, column, rowIndex, columnIndex }) {
      if(rowIndex === 0){
        if(columnIndex === 0){
          return [ 1,2]
        }else if(columnIndex === 1){
          return [0,0]
        }else{
          return [1,1]
        }
      }
    },

以上是先找到第一行的数据，如果是第一列的就占2格，第二列就是隐藏，剩余的都是不做任何处理。同理，读者可以任意DIY符合自己需求的table

5、DIY表格时遇到的问题 --- 表头与表格没有对齐

主流的解决方法为

1、添加CSS样式

.el-table th.gutter{
    display: table-cell!important;
}

2、el-table-column中加上:key="Math.random()"

3、在<el-table>上绑定ref='tableRef' ,然后在调取到数据后执行以下代码

this.$nextTick(() => {
   this.$refs.tableRef.doLayout()
})