1.在Element UI中,可以使用CSS的text-overflow属性来实现表格超出部分省略号显示,并且鼠标移入完整显示的效果。首先,在表格的样式中添加以下CSS样式:
.el-table__body-wrapper .cell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.el-table__body-wrapper .cell:hover {
overflow: visible;
white-space: normal;
}
2.然后,在表格的列定义中,添加
show-overflow-tooltip
属性,用于鼠标移入时显示完整内容的提示:
<el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
<el-table-column prop="age" label="年龄" show-overflow-tooltip></el-table-column>