elementui表格中tip设置_VUE2.0+ElementUI2.0表格el-table:表头扩展el-tooltip

ElementUI2.0的表格的扩展:

如果要实现鼠标移到表头有注释或者弹框该怎么添加呢?

可以使用table的rander-header属性,render出一个el-tooltip文字提示

而文字提示的内容暂存到label-class-name属性里(当然损失了label-class-name的应有功能)

在el-table-column上添加:rander-header="foo"

然后在methods里写上foo方法:

foo(h,{column}){

if(column. labelClassName){

return(

class="item"

effect="dark"

content={column.lableClassName}

placement="bottom"

>

{column.lable}

)

}

}

注:里边的span是渲染的表头名,因为全部整个都重新渲染了,效果如下图:

微信图片_20180330093749.jpg

如果还有其它疑问请留言,谢谢支持~

demo github地址 运行后点击菜单里的“持仓”

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值