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

这种情况下：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
      }
    }, 

转载于：https://blog.csdn.net/weixin_50070859/article/details/124316106