el-table show-overflow-tooltip 字段过长闪烁问题
时间: 2023-07-12 18:03:47 浏览: 132
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
如果 `el-table` 中某些字段的内容过长,在表格中显示时可能会出现闪烁的问题,这是因为默认情况下 `el-table` 会尝试自动调整单元格的宽度以使其适应内容。当单元格宽度不足以容纳内容时,`el-table` 会对其进行截断,然后通过 CSS 属性 `text-overflow: ellipsis` 显示省略号。
为了解决这个问题,可以开启 `show-overflow-tooltip` 属性。这样,当单元格内容过长时,会自动为其添加一个提示框,鼠标悬停在单元格上时即可显示完整内容。
```html
<el-table :data="tableData" show-overflow-tooltip>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
```
如果你想要手动控制单元格的宽度而不开启 `show-overflow-tooltip` 属性,可以在 `el-table-column` 中使用 `min-width` 属性来设置单元格的最小宽度,这样就可以避免单元格因内容过长而导致的宽度调整。
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" min-width="100px"></el-table-column>
<el-table-column prop="age" label="年龄" min-width="80px"></el-table-column>
<el-table-column prop="address" label="地址" min-width="200px"></el-table-column>
</el-table>
```
以上是两种解决 `el-table` 中字段过长闪烁问题的方法,根据你的实际需求选择即可。
阅读全文