Yoon_me
侠客
侠客
  • 最后登录2020-09-09
  • 发帖数6
阅读:5022回复:0

给Table的表头加icon怎么实现

楼主#
更多 发布于:2020-09-09 13:28
最近在做项目的时候遇到了在使用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里面的东西渲染不上。
最终效果:
游客


返回顶部

公众号

公众号