美文网首页
VUE2.0+ElementUI2.0表格el-table:表头

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

作者: River_mx | 来源:发表于2018-03-29 11:25 被阅读0次

    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地址 运行后点击菜单里的“持仓”

    相关文章

      网友评论

          本文标题:VUE2.0+ElementUI2.0表格el-table:表头

          本文链接:https://www.haomeiwen.com/subject/vmkmcftx.html