Element table 表头添加元素-蒲公英云

Element table 表头添加元素

实现步骤：

1、html在table列表中去定义 render-header属性并绑定函数

<el-table-column 
        v-for="(item,index) in tableTdArr"
        :key="index"
        :prop="item.prop"
        :label="item.label" 
        :min-width="item.width"
        :render-header="renderHeader"
        :show-overflow-tooltip='item.showOverflowTooltip'
    ></el-table-column>

备注： renderHeader就是对列标题Label区域渲染使用的Function，通过他实现自定义表头

2、js中实现函数

// 修改表头
    renderHeader(h,{column}){
        if(column.property=='timeDay'){//无出入天数表头
            // console.log('修改表头   column=',column)
            return h('div',
                [
                    h('span', column.label),
                    h(
                        'el-tooltip',{
                            props:{
                                content: (()=>{ return '当天时间 - 最后记录时间 = 无出入天数'})(),
                                placement: 'top'
                            }
                        },
                        [h('i', {
                            class:'el-icon-question',
                            style:'margin-left:5px;cursor:pointer;'
                        })]
                    )
                ],  
            );
        }
        return h('div',[h('span', column.label)]);
    },