elementui表格内容超出隐藏显示省略号

最新推荐文章于 2024-08-06 20:36:47 发布

热爱学习的凡凡酱

最新推荐文章于 2024-08-06 20:36:47 发布

阅读量4.5k

点赞数 2

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/Aichirouzale/article/details/124173464

版权

本文介绍了如何使用ElementUI的表格组件实现内容超出显示省略号的效果，并通过`:show-overflow-tooltip='true'`属性添加了鼠标悬停显示完整内容的提示功能。示例中展示了表格的多列配置，包括歌曲标题、时长、歌手和专辑等信息，实现了简洁且信息丰富的展示。

摘要由CSDN通过智能技术生成

elementui表格内容超出显示省略号，el-table控制属性：:show-overflow-tooltip=‘true’

<el-table
            :data="list"
            stripe
            style="width: 100%"
            :row-style="{ height: '57px', padding: '0' }"
            :cell-style="{ padding: '0' }"
            
          >
            <el-table-column width="60" type="index"> </el-table-column>
            <el-table-column width="60" type="index">
              <div class="img-Play">
                <img src="@/assets/find/play.png" />
              </div>
            </el-table-column>
            <el-table-column prop="name" label="歌曲标题" width="180" :show-overflow-tooltip='true'>
            </el-table-column>
            <el-table-column prop="dt" label="时长"> </el-table-column>
            <el-table-column prop="ar.name" label="歌手"> </el-table-column>
            <el-table-column prop="al.name" label="专辑" :show-overflow-tooltip='true'> </el-table-column>
          </el-table>

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

热爱学习的凡凡酱

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
elementui表格内容超出隐藏显示省略号

elementui表格内容超出显示省略号，el-table控制属性：:show-overflow-tooltip=‘true’<el-table :data="list" stripe style="width: 100%" :row-style="{ height: '57px', padding: '0' }" :cell-style="{ padding: '0' }"
复制链接

扫一扫