当前位置:   article > 正文

el-table表格中数据过长如何使用省略号_el-table 省略号

el-table 省略号

前提问题:当表格中某一个数据过长,不需要气泡提示,需要省略号显示
解决过程:使用el-table时,el-table-column自带show-overflow-tooltip属性可以将不完全展示的内容通过气泡提示进行展示:show-overflow-tooltip="true",当数据过长,并要求不使用气泡提示,且不完全展示,使用省略号时需要将已经拿到的字段内容,使用插件进行单独处理
解决结果:

  1. <el-table-column
  2.     prop="responseData"
  3.     label="日志消息"
  4.     :show-overflow-tooltip="false"
  5. >
  6.     <template #default="scoped">
  7.         <span
  8.             :title="scoped.row.responseData"
  9.             style="
  10.                     display: -webkit-box;
  11.                     text-overflow: ellipsis;
  12.                     overflow: hidden;
  13.                     -webkit-line-clamp: 1;
  14.                     -webkit-box-orient: vertical;
  15.                     white-space: pre-line;
  16.                 "
  17.          >
  18.                 {{ scoped.row.responseData}}
  19.         </span>
  20.     </template>
  21. </el-table-column>


 

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

闽ICP备14008679号