最近在做项目的时候遇到了在使用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里面的东西渲染不上。
最终效果:
可参考添加链接描述