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

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

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

案例展示:

28678c8907ed4fef99db92d5b6d438ed.png

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


我们加入样式看看:


8927b8bb33724bad805f6d7888110f1b.png


效果图:


17f57fbf72724a6c977e9c0889a3d159.png


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



相关文章
|
存储 JavaScript 前端开发
js数组高阶函数——includes()方法
js数组高阶函数——includes()方法
2155 0
|
前端开发
给elmentui中的el-table-column 添加背景色怎么加
本示例通过自定义 ECharts 图例的 `formatter` 函数,实现在图例中同时显示名称、数值和百分比。代码中还优化了图例布局和饼图标签样式,使数据展示更清晰直观。
1356 0
Vue2时间轴(横向)
该横向时间轴组件 `HorizonTimeLine` 可自定义时间轴数据 (`timelineData`) 和初始选中年份 (`activeYear`)。通过点击不同的年份,可以改变当前激活的年份,并有相应的视觉反馈。该组件支持均匀自适应排列,且易于在其他页面中引入和使用。
1540 0
Vue2时间轴(横向)
|
JSON JavaScript 前端开发
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
1969 0
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
|
JSON JavaScript 定位技术
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
3662 1
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
6757 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
element el-table 设置fixed导致行错乱问题
文章讨论了在使用Element UI的`el-table`组件时,设置固定列(`fixed`)导致行错乱的问题,并提供了解决方案。问题产生的原因是当表格底部有滚动条而固定列底部没有滚动条时,行无法对齐。解决办法是在表格中设置`padding-bottom`的内边距与滚动条高度相等,确保固定列和非固定列的行能够对齐。
5353 0