el-table中el-input超出显示省略号,hover显示所有且可复制(el-popover和el-tooltip)

最新推荐文章于 2023-11-11 19:06:21 发布

原创最新推荐文章于 2023-11-11 19:06:21 发布 · 9.7k 阅读

22 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

js 同时被 3 个专栏收录

20 篇文章

订阅专栏

vue

10 篇文章

订阅专栏

elementui

9 篇文章

订阅专栏

本文介绍使用ElementUI处理表格单元格内容溢出的方法，通过el-tooltip和el-popover组件实现鼠标悬停时显示完整数据，提升用户体验。

需求如下:
在这里插入图片描述

其实table里有个属性show-overflow-tooltip,可以实现超出显示省略号,但是hover的时候不好复制,所以考虑别的方式
elementui提供了2种方式:

最终效果:

实现代码如下:
el-tooltip

<el-table-column label="请求数据" width="300px">
    <template slot-scope="scope">
        <el-tooltip class="item" effect="light" :content="scope.row.reqData" placement="top-start">
          <div slot="content" style="width: 300px;">{{scope.row.reqData}}</div>
          <div class="btn">{{scope.row.reqData}}</div>
        </el-tooltip>
    </template>
</el-table-column>

el-popover

 <el-table-column label="返回数据" width="300px">
     <template slot-scope="scope">
         <el-popover width="250" placement="top-start" trigger="hover" :content="scope.row.respData">
           <span slot="reference" class="btn">{{ scope.row.respData }}</span>
         </el-popover>
     </template>
 </el-table-column>