码迷,mamicode.com
首页 > 其他好文 > 详细

element ui table 表头跨两列实现

时间:2021-04-08 13:25:19      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:合并   color   round   ack   ade   cell   next   通过   lsp   

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

element ui table 表头跨两列实现

标签:合并   color   round   ack   ade   cell   next   通过   lsp   

原文地址:https://www.cnblogs.com/rabbit-lin0903/p/14627713.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!