您当前的位置: 首页 >  ui

小志的博客

暂无认证

  • 1浏览

    0关注

    1217博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

element ui列表内容过多隐藏部分内容后,鼠标放上显示全部

小志的博客 发布时间:2021-06-01 21:55:24 ,浏览量:1

1、在内容过多的列中添加show-overflow-tooltip属性,如下:

  

2、添加show-overflow-tooltip属性后,此列中过多的内容会用…替代,鼠标滑过会显示全部内容,如下图:

在这里插入图片描述 在这里插入图片描述

3、如果内容非常长就会出现新的问题,超已有表格宽度会非常难看 ,所以还要限定其宽度,当宽度限定之后,高度就会超出电脑屏幕,也要限制高度。加入如下样式

  • 注:该样式需要加在全局样式中。不能在中修改,因为不会生效。要添加到src\assets\css\base.css全局样式文件中

    .el-tooltip__popper{
        max-width:30%;
        padding-bottom: 5px!important;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 15;
        -webkit-box-orient: vertical;
     
      }
      .el-tooltip__popper,.el-tooltip__popper.is-dark{
        background:rgb(48, 65, 86) !important;
        color: #fff !important;
        line-height: 24px;
      }
    

    在这里插入图片描述

4、最后的效果图如下:

在这里插入图片描述

关注
打赏
1661269038
查看更多评论
立即登录/注册

微信扫码登录

0.1865s