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

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

视图显示:

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值