热门标签
热门文章
- 1one piece_娜美_01_one piece hentai
- 2CrossOver软件2023破解激活码_crossover-wine注册
- 3Spring Boot(四)：Thymeleaf 使用详解_spring thymeleaf
- 4NX+Ubuntu18.04+ROS Realsense(RealSenseD435i )的安装与使用_realsense安装
- 5记录：rosdep update
- 6js通过a标签的方式下载文件并对其重命名的完整方案_a标签下载文件重命名
- 7JavaScript中的Array.prototype.forEach()方法(简介+重写)_js array.prototype.foreach
- 8leetcode 94 二叉树的中序遍历（java）_lecode中树的输入root = [1,null,3,2,4,null,5,6]是怎么转化成节点的
- 9R语言入门笔记2.1
- 10c#--正则表达式（项目常用）_c# 正则表达式 数字
当前位置: article > 正文
element ui表格内容超出文本给省略号，鼠标移入元素时展示全部文本内容_elment-ui 文字打点后鼠标移入弹出完整信息
作者：2023面试高手 | 2024-02-16 07:05:33
赞
踩
elment-ui 文字打点后鼠标移入弹出完整信息
我们在开发过程中会遇到表格内容展示不全的问题
那么我们就需要一个办法让用户看到全部的内容
这时我们能想到的就是el-tooltip
当鼠标引入元素时展示content属性中的内容
那么我们原来的代码是
<el-table-column
prop="logNote"
label="描述">
</el-table-column>
- 1
- 2
- 3
- 4
我们改写成
<el-table-column label="描述">
<template slot-scope="scope">
<el-tooltip :content="scope.row.logNote" placement="bottom" effect="light">
<el-button class = "keyButton">{{ scope.row.logNote }}</el-button>
</el-tooltip>
</template>
</el-table-column>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
然后在css中加入样式
.keyButton.el-button{
width: 100%;
overflow:hidden;
text-align: left;
text-overflow:ellipsis;
white-space:nowrap;
border: 0 !important;
background: transparent;
padding: 0 !important;
}
.keyButton.el-button:hover{
border: 0 !important;
background: transparent;
padding: 0 !important;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
效果如下
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/91674
推荐阅读
相关标签
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
