element-ui里的el-table是怎么实现超出内容省略并加tooltip提示的?

效果图
element-ui里的el-table是怎么实现超出内容省略并加tooltip提示的?_第1张图片
效果描述:
只有超出10个字的标题才会显示el-tooltip,没有超出的不会显示
思路:表格中的数据超出10个字显示隐藏,用hover效果显示el-tooltip并显示全部的文字
代码:

     
          
     
/deep/.el-table td {
    border-bottom: 1px solid #2E2C3D;
    background: #242133;

    .cell span {
        display: block;
        width: 10em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

**提示:**把cell样式里面的em单位换成width也可以实现,具体看需求

自定义宽度(给提示加样式)

 
          
        

通过template标签插槽添加提示语,便于给提示语添加布局改变数据结构或是样式

你可能感兴趣的:(ui,vue.js,elementui)