element ui 文字省略
时间: 2023-11-11 14:07:40 浏览: 139
element ui分页多选,翻页记忆的实例
使用Element UI表格进行数据展示时,可以通过添加`min-width`和`show-overflow-tooltip`属性来控制文字的省略和显示。其中,`min-width`属性可以设置列的最小宽度,当内容超出列宽时,会自动省略多余的内容。`show-overflow-tooltip`属性可以设置是否显示tooltip提示框,当内容被省略时,鼠标悬停在单元格上时会显示tooltip提示框,以显示完整内容。
完整代码如下所示:
```html
<el-table-column prop="remark" header-align="center" align="center" label="备注" min-width="120" :show-overflow-tooltip="true"></el-table-column>
```
如果想要更改tooltip提示框的样式,可以使用CSS样式来修改。例如,可以通过修改`.el-tooltip__popper`类来设置tooltip提示框的字体大小和最大宽度,以达到更好的显示效果。
完整代码如下所示:
```css
.el-tooltip__popper {
font-size: 14px;
max-width: 40%;
}
```
阅读全文