【Vue】列表中数据较长时，按固定宽度展示，超出的用“...“当鼠标放上时可以展示全称

栗子菜菜

于 2022-06-15 11:41:47 发布

阅读量661

点赞数 1

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/sinat_38974831/article/details/125208676

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

原图：
在这里插入图片描述
效果图：

超出200px的省略展示用class=“no-wrap”
鼠标放上展示全部用Tooltip 文字提示Element组件
content 显示的内容，也可以通过 slot#content 传入 DOM

<el-table-column width="200px" align="center">
     <template slot-scope="scope">
         <el-tooltip class="item" effect="dark" placement="top-end">
              <div slot="content">{{ dom}}</div>   
               <div class="no-wrap">{{ dom }}</div>
          </el-tooltip>
       </template>
</el-table-column>