隐藏el-table-column过多的内容并进行浮窗展示

简介: 隐藏el-table-column过多的内容并进行浮窗展示

element官方文档给我们提供了一个column属性:show-overflow-tooltip="true",意思是超出宽度内容会隐藏鼠标移动上去浮窗显示

案例展示:

28678c8907ed4fef99db92d5b6d438ed.png

不隐藏的话显得很臃肿,而且column会随内容变化高度很不美观


我们加入样式看看:


8927b8bb33724bad805f6d7888110f1b.png


效果图:


17f57fbf72724a6c977e9c0889a3d159.png


这样就能把多余内容隐藏起来了。



相关文章
|
缓存 资源调度
解决安装依赖时报错:npm ERR! code ERESOLVE
解决安装依赖时报错:npm ERR! code ERESOLVE
5861 0
解决安装依赖时报错:npm ERR! code ERESOLVE
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
3834 0
|
存储 JavaScript 前端开发
js数组高阶函数——includes()方法
js数组高阶函数——includes()方法
1844 0
Element的el-table行列错位对不齐问题处理
本文目录 1. 问题表现 2. 问题发现 3. 问题处理 4. 另一种处理方案
6235 0
Element的el-table行列错位对不齐问题处理
|
JavaScript
Vue~在线预览doc、docx、pdf、img文件
Vue~在线预览doc、docx、pdf、img文件
8179 0
|
10月前
|
前端开发
给elmentui中的el-table-column 添加背景色怎么加
本示例通过自定义 ECharts 图例的 `formatter` 函数,实现在图例中同时显示名称、数值和百分比。代码中还优化了图例布局和饼图标签样式,使数据展示更清晰直观。
1181 0
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
1258 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
JSON JavaScript 前端开发
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
1855 0
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
|
前端开发
el-form-item label中的字体样式设置格式
这篇文章介绍了如何在Element UI的`el-form-item`组件中自定义`label`标签的样式,通过使用`slot`属性和内联CSS来改变字体颜色和加粗显示。
el-form-item label中的字体样式设置格式

热门文章

最新文章