VUE2.0+ElementUI2.0表格el-table:表头扩展el-tooltip

ElementUI2.0的表格的扩展:

elementUI表格table

elementUI文字提示Tooltip

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

可以使用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(
          <el-tooltip
          class="item"
          effect="dark"
          content={column.lableClassName}
          placement="bottom"
          >
            <span>{column.lable}</span>
          </el-tooltip>
        )
    }
}

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

微信图片_20180330093749.jpg

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容