el-table 表头合并

效果如下，圈起来的是一个表头对应两列，这里是多级表头（本篇借鉴而来，如有需要请留言删除！）

 

 先说合并表头，主要用到header-cell-style方法

 

这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效 我也是试了很多次才得出这个结论

合并表头代码思路是将两个列通过handerMethod隐藏第一列的同时，让第二列占据两个单元格的宽度来实现合并效果

以上是一个版本描述，下面是另外一个描述：

主要看handerMethod这个方法
rowIndex代表当前行号（行索引），columnIndex 代表当前列号（列索引）
比如说表头是第一行，行号是0，表头第一行第一列，行号和列号都是0

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

理解这个之后，其实代码也就很好理解了，找到表头这一行要合并的两列，将第一列的colSpan设为2，代表单元格可以占据两列，将第二列隐藏
 

<template>
      <el-table
                ref="standTable"
                border
                :data="standTableList"
                show-summary
                row-key="id"            
                :header-cell-style="handerMethod"
              >
       <el-table-column  prop="one" label="多级表头第一行">
                  <el-table-column  prop="one" label="多级表头第二行"></el-table-column>
                  <el-table-column  prop="two" label="多级表头第二行"></el-table-column>
       </el-table-column>
    </el-table>
</template>
<script>

    
export default {
    methods:{
        
     //隐藏表头
     handerMethod({ row, column, rowIndex, columnIndex }) {
       if (row[0].level == 1) {
         //这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效
         row[0].colSpan = 0    // 这行我使用的时候注释掉也可以
         row[1].colSpan = 2
         if (columnIndex === 0) {    // 我结合多级表头后不需要隐藏，往下合并就可以了，也没有隐           藏成功故此没用这个
           return { display: 'none' }
         }
       }
     },
     //隐藏表头  -- 我使用的代码如下
     handerMethod({ row, column, rowIndex, columnIndex }) {
       if (row[0].level == 1) {
         //这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效
         row[1].rowSpan = 2
         
       }
     },

    }
}
</script>

如上就是列头合并，接来下是内容合并，依据列中的值进行表格合并，也可以多条件多单元格合并

 

<template>
  
</template>

<script>
export default {
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0) {    // 需要多列在这里用 || 加上列下标
                    // this.tableData  修改
                    const _row = (this.flitterData(this.xueqianxxList).one)[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    };
                }
                else if (columnIndex ===1) {
                    const _row = (this.flitterData(this.xueqianxxList).two)[rowIndex];
                    const _col = _row > 0 ? 1 : 0; // 如果这一行隐藏了，这列也隐藏
                    return {
                        rowspan: _row, //合并的行数
                        colspan: _col, //合并的列数，设为０则直接不显示
                    };
                }
            },
flitterData (arr) {
    let spanOneArr = []
    let concatOne = 0

    let spanTwoArr = []
    let concatTwo = 0
    arr.forEach((item, index) => {
        if (index === 0) {
            spanOneArr.push(1);
            spanTwoArr.push(1)
        } else {
            //onelever 修改
            if (item.onelever === arr[index - 1].onelever) { //第一列需合并相同内容的判断条件
                spanOneArr[concatOne] += 1;
                spanOneArr.push(0);
            } else {
                spanOneArr.push(1);
                concatOne = index;
            };


            //name 修改
            if (item.twolever === arr[index - 1].twolever) { //第二列需合并相同内容的判断条件
                spanTwoArr[concatTwo] += 1;
                spanTwoArr.push(0);
            } else {
                spanTwoArr.push(1);
                concatTwo = index;
            };
        }
    });
    return {
        one: spanOneArr,
        two: spanTwoArr,
    }
},
}
</script>

<style>

</style>