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

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

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

案例展示:

28678c8907ed4fef99db92d5b6d438ed.png

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


我们加入样式看看:


8927b8bb33724bad805f6d7888110f1b.png


效果图:


17f57fbf72724a6c977e9c0889a3d159.png


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



相关文章
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
3381 0
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
5457 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
前端开发
el-form-item label中的字体样式设置格式
这篇文章介绍了如何在Element UI的`el-form-item`组件中自定义`label`标签的样式,通过使用`slot`属性和内联CSS来改变字体颜色和加粗显示。
el-form-item label中的字体样式设置格式
|
JSON JavaScript 前端开发
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
1747 0
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
Elementui-Image组件,单个图片点击放大展示
Elementui-Image组件,单个图片点击放大展示
582 2
Element UI 数字输入框的实现
Element UI 数字输入框的实现
651 0
|
JavaScript
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
1286 0
|
计算机视觉
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
|
JavaScript
js将数组转为字符串用逗号隔开,字符串转数组
js将数组转为字符串用逗号隔开,字符串转数组
642 1