给Table的表头加icon怎么实现

最近在做项目的时候遇到了在使用element-ui的框架基础上,实现给table表头加上icon,用到了el-table中的属性renderHeader,主要代码如下:
1、首先在你需要的el-table-column中加上该属性:
在这里插入图片描述
h相当于vue的createElement函数,参数也是一样
obj 是{column,$index} column:是当前列的所有信息 $index:是只的当前在第一列,一般从0开始
column:是自定义属性,是我本次需要的出以上信息以外的其他数据参数
2、在method中写方法

renderHeader1(h,obj,column){
                if (column.finishedJiaFenFlag==false){
                    return h('el-tooltip',{
                            props:{
                                content:'该单位有未完成的加分指标',
                                placement:'top',
                            },
                            attrs:{
                               width:column.width
                            },
                            domProps:{
                                innerHTML:column.label+'<sapn  style="color: red;padding-left: 4px;font-size: 16px;" class="iconfont icon-warning1" ></sapn>'
                            }
                        },
                        [h('span')]
                    )
                }
                else {
                    return h('div',{
                            attrs:{
                                width:column.width
                            },
                            domProps:{
                                innerHTML:column.label
                            }
                        }

                    )
                }


            },

el-tooltip:是我返回的element-ui中的一个提示标签 实现悬停出现提示框 ,prop中写el-tooltip的相关数据的设置
这里值得值得注意的是: [h(‘span’)] 这一句一定要带上,不然span里面的东西渲染不上。
最终效果:
在这里插入图片描述
可参考添加链接描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值