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

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

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

案例展示:

28678c8907ed4fef99db92d5b6d438ed.png

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


我们加入样式看看:


8927b8bb33724bad805f6d7888110f1b.png


效果图:


17f57fbf72724a6c977e9c0889a3d159.png


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



相关文章
element-plus:el-table自定义展开图标处于列的位置
element-plus:el-table自定义展开图标处于列的位置
695 0
|
JavaScript
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
问题原因:多个tabs共用一个实体,动态显示隐藏列 出现了固定在右侧的列(fixed="right")错位 【解决方案】 表格的重新布局,只要table数据发生变化的时候就重新渲染表格 ```js this.$nextTick(() => { this.$refs.formname.doLayout() }) ``` 参考element官方文档 ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231030-e40
270 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
|
6月前
|
JavaScript 前端开发
table表格和下拉组件中data为什么必须是一个函数?
table表格和下拉组件中data为什么必须是一个函数?
|
7月前
解决elementui中el-table表格首次expand展开不能正常渲染展开页面里面的表格内容
解决elementui中el-table表格首次expand展开不能正常渲染展开页面里面的表格内容
|
JavaScript BI
el-table 多表格弹窗嵌套数据显示异常错乱问题
## 1、业务背景 使用vue+element开发报表功能时,需要列表上某列的超链接按钮弹窗展示,在弹窗的el-table列表某列中再次使用超链接按钮点开弹窗,以此类推多表格弹窗嵌套,本文以弹窗两次为例 最终效果如下示例页面 ![微信截图_20231110143638.png](https://ucc.alicdn.com/pic/developer-ecology/j2ygdazy447va_6eb0201441bc40a4b5bda9a7e573f0d2.png)
219 0
通过select下拉框里的value控制div显示与隐藏
通过select下拉框里的value控制div显示与隐藏
84 0
|
前端开发
前端笔记,table标签中td宽度不受控制的坑
前端笔记,table标签中td宽度不受控制的坑
|
缓存 JavaScript 前端开发
el-table 列的动态显示与隐藏
当我们在对表格数据查看的时候,可能某些列的数据是当前想要重点关注的,而某些列并不需要展示出来,我们就可以通过对表格的列进行实时的一个切换去实现动态的显示与隐藏。
|
容器
Echarts实战案例代码(30):同一个id空间Tab按钮显示不同图表防止叠加的解决方案
Echarts实战案例代码(30):同一个id空间Tab按钮显示不同图表防止叠加的解决方案
101 0