el-table 中间列表头合并显示

需求：

        由于表格中间列的数据含义相同，所以需要将中间所有列的表头进行合并展示；

初始效果图：

 

 完整代码如下：

    
    
    
    
    
    
    

        
data() {
    return {
        tableData: [
            {
                name: '张三',
                date1: '2021-10-11',
                date2: '2021-10-12',
                date3: '2021-10-13',
                date4: '2021-10-14',
                date5: '2021-10-15',
                tips: '暂无'
            },
            {
                name: '张三',
                date1: '2021-10-11',
                date2: '2021-10-12',
                date3: '2021-10-13',
                date4: '2021-10-14',
                date5: '2021-10-15',
                tips: '暂无'
            },
            {
                name: '张三',
                date1: '2021-10-11',
                date2: '2021-10-12',
                date3: '2021-10-13',
                date4: '2021-10-14',
                date5: '2021-10-15',
                tips: '暂无'
            },
            {
                name: '张三',
                date1: '2021-10-11',
                date2: '2021-10-12',
                date3: '2021-10-13',
                date4: '2021-10-14',
                date5: '2021-10-15',
                tips: '暂无'
            },
            {
                name: '张三',
                date1: '2021-10-11',
                date2: '2021-10-12',
                date3: '2021-10-13',
                date4: '2021-10-14',
                date5: '2021-10-15',
                tips: '暂无'
            }
        ]
    }
}  
                                
mounted() {
    // 待表格渲染完成后再进行合并操作
    this.$nextTick(() => {
        // 中间第二列开始到倒数第二列结束，进行合并表头显示
        this.setColSpan();
    })
},
        
methods: {
    // 合并表头中间的所有单元格（2 ~ n-1）
    setColSpan() {
        // 获取表头的所有单元格
        var allCells = document.getElementsByClassName('el-table__header')[0].rows[0].cells
        // 将第二列表头单元格的colSpan设为需要合并的总列数
        allCells[1].colSpan = 5
        // 将已合并列表头单元格的display设为none
        for (let i = 2; i < 6; i++) {
            allCells[i].style.display = 'none'
        }
    }
}

最终效果图如下：