iview Tooltip换行及应用

最新推荐文章于 2025-05-22 11:29:31 发布

爱不到要偷

最新推荐文章于 2025-05-22 11:29:31 发布

阅读量528

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhaojunhao/p/9647461.html

本文详细介绍了Element UI中Tooltip组件的两种使用方法。第一种直接使用HTML标签方式，通过设置placement属性实现提示框位置调整。第二种采用Vue.js的render函数方式，通过条件判断和字符串截断实现动态内容展示及鼠标悬停时的完整信息提示。适用于解决长文本在表格列中显示不全的问题。

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

第一种：

<Tooltip placement="bottom">
    <Button>Multiple lines</Button>
    <div slot="content" style="white-space: normal;">
       A balloon appears when the mouse passes over this text
     </div>
</Tooltip>

第二种：　

render: (h, params) => {
            let texts = ''; //表格列显示文字
            if (params.row.content !== null) {
              if (params.row.content.length > 6) { //进行截取列显示字数
                texts = params.row.content.substring(0, 6) + ".....";
              } else {
                texts = params.row.content;
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'bottom',
                  // transfer: true  //是否将弹层放置于 body 内
                },
                style: {
                  cursor: 'pointer',
                }
              }, [ //这个中括号表示是Tooltip标签的子标签
                texts, //表格列显示文字
                h('div', {
                    slot: 'content',
                    style: {
                      whiteSpace: 'normal'
                    }
                  }, params.row.content //整个的信息即气泡内文字
                )
              ])
            ]);
          }

显示结果如下：