element ui表格文字提示踩坑

最新推荐文章于 2024-07-18 09:59:44 发布

weixin_41260876

最新推荐文章于 2024-07-18 09:59:44 发布

阅读量257

点赞数

文章标签： javascript html elementui

本文链接：https://blog.csdn.net/weixin_41260876/article/details/120174016

版权

这篇博客详细记录了在使用ElementUI表格时遇到的文字省略号提示问题，尤其是当数据是数组形式且需要多行展示时的挑战。作者探讨了show-overflow-tooltip属性的限制，以及el-tooltip在表格中的样式调整。通过实例代码，展示了如何使用v-for循环和el-tooltip组件来实现多行换行提示，并解决了表格内的样式问题，提供了一种有效的解决方案。

摘要由CSDN通过智能技术生成

element ui表格文字提示踩坑

拿到的数据是数组形式，单行省略号文字提示是多行

常规的

1） show-overflow-tooltip 只有template里面包的是span 才会生效，且无法换行

2）使用 el-tooltip 文字，针对的是简单数据类型，此处使用换行
提示是正常的，但表格中的样式又不太对。

3）解决表格中的样式问题

<el-table-column  label="备注" min-width="100">
   <template slot-scope="scope">
       <div style="overflow: hidden;width:200px;">
       <span v-for="(item, index) in scope.row.description" :key="index" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis; width:200px;display:inline-block;">
       <el-tooltip placement="top" popper-class="atooltip">
           <span v-for="(li,j) in scope.row.description" :key="j" slot="content">
           {{j + 1}},{{li}}<br>
           </span>
           <span>
           {{index + 1}},{{item}}
           </span>
       </el-tooltip>
       </span>
       </div>
   </template>
</el-table-column>