el-table单元格内容溢出悬浮提示改造（单元格多行显示）

最胖的小仙女

已于 2022-06-07 18:07:33 修改

阅读量3k

点赞数

分类专栏： element UI 文章标签： vue.js elementui 前端

于 2022-06-07 17:59:57 首次发布

本文链接：https://blog.csdn.net/weixin_39418338/article/details/125169889

版权

本文介绍了如何改造ElementUI的el-table组件，以实现单元格内容过多时自动显示多行并提供悬浮提示。通过设置showTooltip属性为双向绑定数据，并结合v-model和disabled属性，解决了官方文档中仅一行显示和鼠标悬停显示完整内容的局限。

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

大家都知道elementUI中的el-table的单元格，如果内容比较多一行显示不了，只能一行显示，多余的内容‘...’，鼠标放上去显示所有内容，需要在el-table-column添加show-overflow-tooltip属性，官方文档只有这种写法，比较局限。这时需要我们改造来满足我们的需求。

以单元格显示两行为例子：

1、html

<el-table-column
    label="介绍内容"
    align="center"
    min-width="160">
    <template slot-scope="scope">
    <!--  show-overflow-tooltip改造悬浮提示 -->
    <el-tooltip
        placement="top"
        :open-delay="300"
        effect="dark"
        :content="scope.row.introContent"
        :disabled="!scope.row.showTooltip">
        <div @mouseenter="showTips($event,scope.row,scope.row.introContent)" class='myNote'>{
  {scope.row.introContent}}</div>
    </el-tooltip>
    </template>
</el-table-column>