给elementUI的table表的某一列添加文字提示（tooltip）

最新推荐文章于 2025-06-04 15:16:41 发布

qq_36813076

最新推荐文章于 2025-06-04 15:16:41 发布

阅读量9.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： element tooltip table 文章标签： element vue table tooltip

本文链接：https://blog.csdn.net/qq_36813076/article/details/103381734

element 同时被 3 个专栏收录

3 篇文章

订阅专栏

tooltip

1 篇文章

订阅专栏

table

1 篇文章

订阅专栏

本文介绍了一种在表格单元格中优雅地展示多个DOM元素的方法，当文本超出单元格宽度时使用省略号，并通过鼠标悬停显示全部文本内容。采用el-table-column和el-tooltip组件实现这一需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要实现的需求是单元格内会有多个DOM，DOM文本依次上下排列，超出单元格宽度用省略号代替，鼠标滑过显示所有文本的内容，如下图所示：

在这里插入图片描述
解决方案如下图所示：

在这里插入图片描述
代码如下：

<el-table-column prop="pointFile" label="点位库" width="140">
                <template slot-scope="scope">
                  <el-tooltip placement="top" effect="dark">
                    <div slot="content" v-for="item in (scope.row.pointFile.split(','))">{{ item }}</div>
                    <ul  class="name-wrapper" style="color:#1989fa;cursor: pointer;
                    white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
                         @click="enterPoint(scope.row)">
                      <li v-for="item in (scope.row.pointFile.split(','))" style="text-align: left">{{ item }}</li>
                    </ul>
                  </el-tooltip>

                </template>
              </el-table-column>