element plus表格不显示省略号如何设置
时间: 2023-08-18 22:10:00 浏览: 112
您可以使用 Element Plus 表格组件的 `show-overflow-tooltip` 属性来实现当单元格内容过长时显示省略号并鼠标悬停时显示完整内容的效果。该属性默认为 `false`,需要设置为 `true` 才能生效。例如:
```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>
```
这样,当单元格内容过长时,会自动显示省略号,鼠标悬停时会显示完整内容的 Tooltip。如果您想要自定义 Tooltip 的样式,可以使用 `tooltip-slot-scope` 属性来自定义 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="地址" :tooltip-slot-scope="{row, column}">
<el-tooltip effect="dark" :content="row.address" placement="top">
<div class="ellipsis">{{row.address}}</div>
</el-tooltip>
</el-table-column>
</el-table>
```
这样,当单元格内容过长时,会自动显示省略号,并且鼠标悬浮时会显示自定义的 Tooltip。其中,`ellipsis` 类样式可以用来实现省略号的效果。
阅读全文