element ui table 表头跨两列实现

1、为table添加

:header-cell-style="rowClass"

 

2、通过rowClass 将要跨列的columnIndex 添加属性 colSpan : 2

　被合并的列隐藏

 

const tableHeaderStyle = {

        background: '#305496',

        color: '#F8F8FF',

        height: '35px',

        padding: '2px',

    }      

    const rowClass = ({ column,rowIndex,columnIndex}) =>{

        if(rowIndex === 0 && columnIndex === 2){

            nextTick(() =>{

            document.getElementsByClassName(column.id)[0].setAttribute('colSpan',2);

            })  //  一定要写在加载完毕后，nextTick 更新的最晚，才能获取到dom节点。

        }

        if (rowIndex === 0 && columnIndex === 3){

            return {display:'none'}

        }

    return tableHeaderStyle    

    }

 

感谢：https://blog.csdn.net/weixin_43842567/article/details/115243092