el-tooltip显示成json格式，并设置提示框大小

<el-form-item
  label="请求头"
  :rules="{ required: true, message: '不能为空'}"
>
  <el-tooltip :disabled="apiDetail_requestHeaders === null " placement="top">
    <div slot="content" style="width: 500px;overflow-x: auto;">
       <pre> <code>{{ apiDetail_requestHeaders }} </code></pre>
    </div>
    <el-input v-model="apiDetail_requestHeaders" type="textarea" 
    :rows="3" :disabled="!isEdit" />
  </el-tooltip>
</el-form-item>

【备注】也可以通过格式控制toptip的显示范围

<style>
.el-tooltip__popper {
    max-width: 60%!important;
    /* toptip提示语的宽度可根据自己需要进行设置 */
  }
</style>

在表格要展示的列过多时，有些表格内容过多就会用到这个属性，表格的内容按表头宽度超过省略，鼠标悬浮显示全部内容，如果内容过多超屏幕会一直抖动

用法很简单，加一行show-overflow-tooltip就可以了

但是遇到了一个新的问题，这种一般是内容过长是才会这么用，但是如果内容非常长就会出现新的问题，超已有表格宽度会非常难看，所以要限定其宽度，当宽度限定之后，高度就会超出电脑屏幕，也要限制高度。

//宽度可以使用max-width显示,占比为屏幕占比，高度用max-height是行不通的,于是就用的超出行省略，当
//在限制的宽度之内多少行限制(不限制当内容几千几万字时就挂了),padding为了调整我这个正好15行省略看
//起来样式不会出问题,有问题的话可以调padding,line-height,font-size保证展示框样式完整 
.el-tooltip__popper{
    max-width:30%;
    padding-bottom: 5px!important;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 15;
    -webkit-box-orient: vertical;
 
  }
  .el-tooltip__popper,.el-tooltip__popper.is-dark{
    background:rgb(48, 65, 86) !important;
    color: #fff !important;
    line-height: 24px;
  }

2，根据文字长度控制是否提示toolTip。

如果提示的文字内容过长的时候，我们需要根据文本文字的长度判断是否提示

1）表格字段鼠标放置el-popover出现 “引用主题” 的具体内容；

<!-- 表格字段：引用主题 -->
<el-table-column
  align="center"
  header-align="center"
  width="100"
  label="引用主题"
  sortable="custom"
  prop="refCnt"
  show-overflow-tooltip
>
<template slot-scope="scope">
    <span v-if="scope.row.refCnt == '0'" style="color: #f56c6c">0</span>
    <el-popover
      v-else
      placement="bottom"
      width="150"
      trigger="hover"
    >
    <ul :data="scope.row?.themeVos" class="ul-popover">
       <li v-for="(item, index) in scope.row?.themeVos" :key="index">
          <el-tooltip
            class="item"
            effect="light"
            :content="item?.themeName"
            placement="top-start"
            :disabled="!isShowTooltip"
         >
            <!-- visibilityChange：鼠标放置后是否展示省略部分；-->
            <!-- class="overflow"：是否超出隐藏出现省略号； -->
            <div @mouseenter="visibilityChange($event)" class="overflow">
                {{ item?.themeName }}
            </div>
        </el-tooltip>
       </li>
     </ul>
     <span
        style="color: #1989fe; cursor: pointer"
        slot="reference"
     >
        {{ scope.row.refCnt }}
     </span>
    </el-popover>
  </template>
</el-table-column>

（2）定义isShowTooltip控制是否展示提示文字tooltip;

data() {
    return {
        isShowTooltip: false, // 是否显示提示文字
    }
}
（3）对应的鼠标放置触发的方法实现；

 // 是否提示toolTip
 visibilityChange(event) {
    const ev = event.target
    const ev_weight = ev.scrollWidth // 文本的实际宽度   scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
    const content_weight = ev.clientWidth // 文本的可视宽度 clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
    // const content_weight = this.$refs.tlp.$el.parentNode.clientWidth; // 文本容器宽度(父节点)
    if (ev_weight > content_weight) {
    // 实际宽度 > 可视宽度  文字溢出
        this.isShowTooltip =true
    } else {
        // 否则为不溢出
        this.isShowTooltip = false
    }
  },