vue使用elementui出现表格内容过长问题

vue使用elementui出现表格单行内容过长影响显示效果的解决方法

m0_58312555

3718人浏览 · 2022-07-22 09:22:15

m0_58312555 · 2022-07-22 09:22:15 发布

在使用elementUI的过程中，表格中内容如果过长便会自动换行，就容易出现不美观的问题

例如

在这里插入图片描述

解决方法

elementUI中有这么一个属性show-overflow-tooltip可以隐藏过长内容，并且当鼠标放上时进行显示

注意：show-overflow-tooltip虽然能够解决文本过长的显示问题，但是这相对于在每个单元格中都插入了tooltip组件，而tooltip组件会产生大量的DOM，如果大量使用show-overflow-tooltip就会影响页面加载的速度

<el-table-column
	prop="address"
	label="地址"
	:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
	prop="note"
	label="备注"
	:show-overflow-tooltip="true">
</el-table-column>

实现效果

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^