当前位置:   article > 正文

ElementUI中的表格超出文本省略号显示,鼠标划入完整显示_element超过的字符省略

element超过的字符省略

1.在Element UI中,可以使用CSS的text-overflow属性来实现表格超出部分省略号显示,并且鼠标移入完整显示的效果。首先,在表格的样式中添加以下CSS样式:

  1. .el-table__body-wrapper .cell {
  2. white-space: nowrap;
  3. overflow: hidden;
  4. text-overflow: ellipsis;
  5. }
  6. .el-table__body-wrapper .cell:hover {
  7. overflow: visible;
  8. white-space: normal;
  9. }

2.然后,在表格的列定义中,添加show-overflow-tooltip属性,用于鼠标移入时显示完整内容的提示: 

  1. <el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
  2. <el-table-column prop="age" label="年龄" show-overflow-tooltip></el-table-column>

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/91853
推荐阅读