Element table 表头添加元素

布满荆棘的人生 2022-10-11 00:49 235阅读 0赞

实现步骤：

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)]);
        },

> **备注：h() 定义html代码**  
>            **h( 'dev' , \[ \] , \{ \},'文字描述' )**  
>                 **参数1**：定义的标签名称；  
>                 **参数2**：子级标签;  
>                 **参数3**：定义标签的属性值  
>                 **参数4**：定义标签的文本信息

视图显示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70]: /images/20221005/b19c666fac3844ebb66becf0be19c671.png