不改变全局样式设置el-tooltip宽度

最新推荐文章于 2024-07-13 10:06:57 发布

不怕事的铁铲哥

最新推荐文章于 2024-07-13 10:06:57 发布

阅读量759

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_48772601/article/details/128947445

版权

该段代码展示了如何在Vue.js中使用组件来显示带有tooltip的内容，特别是当内容过长时，通过contentDelImg方法处理并限制最大宽度为500px，以提供更好的用户体验。

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

<el-table-column label="发布内容" header-align="center" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tooltip placement="top" v-if="contentDelImg(scope.row.content)>20" >
              <template slot="content">
                <p style="max-width:500px;">{{contentDelImg(scope.row.content)}}</p>
              </template>
              <div class="info-mes">{{contentDelImg(scope.row.content)}}</div>
            </el-tooltip>
            <div v-else>{{contentDelImg(scope.row.content)}}</div>
          </template>
        </el-table-column>

max-width:500px