elementUI中table列表中的tooltip内容换行

最新推荐文章于 2024-09-02 14:10:29 发布

原创最新推荐文章于 2024-09-02 14:10:29 发布 · 5.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #js

elementui table 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在表格中使用自定义slot和v-html指令处理后端返回的客户单号，避免show-overflow-tooltip的问题。通过v-if控制tooltip的显示，并在鼠标悬浮时动态调整显示状态，仅在超出时显示鼠标悬浮提示。

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

在这里插入图片描述
这种情况下：show-overflow-tooltip是无法满足需求的。此时我们采取其他的方式。具体思路如下：

1.使用slot自定义el-tooltip内容
2.v-html指令转义，后端返回的数据使用正则处理，具体代码如下：

  <el-table-column prop="customer_order_no" label="客户单号" width="150">
                      <template slot-scope="scope">
                          <el-tooltip class="item" effect="dark" placement="top" 
                          <div v-html="ToBreak(scope.row.customer_order_no)" slot="content"></div>
                          <div class="oneLine">
                              {{scope.row.customer_order_no}}
                          </div>
                      </el-tooltip>
                      </template>
              </el-table-column>

因为我这边是想要直接在table中展示，所以让后端返回了，下面也就是匹配，换成换行标签。具体大家根据自己实际情况进行展示。

ToBreak (val) {
      return val.replaceAll(',', '<br />')
    },

.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

注：删除 show-overflow-tooltip属性或设置为false，否则页面出现两个近乎重叠的tip

此时换行功能已经实现，但是不管有没有超出，鼠标悬浮都会出现此效果。我们更倾向于超出的时候，有鼠标悬浮效果。通过变量控制。

<el-table-column prop="customer_order_no" label="客户单号" width="150">
                      <template slot-scope="scope">
                          <el-tooltip class="item" effect="dark" placement="top" v-if="!isShowTooltip">
                          <div v-html="ToBreak(scope.row.customer_order_no)" slot="content"></div>
                          <div class="oneLine" @mouseover="onMouseOver">
                              {{scope.row.customer_order_no}}
                          </div>
                      </el-tooltip>
                       <div class="oneLine"  @mouseover="onMouseOver" v-if="isShowTooltip">
                              {{scope.row.customer_order_no}}
                        </div>
                      </template>
              </el-table-column>

  data () {
    return {
      isShowTooltip: true,
    }
  },

onMouseOver (e) {
      var target = e.target
      let textLength = target.clientWidth
      let containerLength = target.scrollWidth
      if (textLength < containerLength) {
        // 溢出了
        this.isShowTooltip = false
      } else {
        this.isShowTooltip = true
      }
    },