el-tooltip文本超过规定行数溢出才显示

害嗨嗨，我又来了奥。想必大家都用过el-table，你们有没有遇到过这样一个场景，就是表格某一个字段的数据比较多，内容显示占很多，然后页面就会变得很高。此时可以用el-tooltip来显示，并且设置好这个组件的宽度，以防撑满整个屏幕。

现在有个需求，如果只允许溢出的时候显示tooltip，没有溢出就不显示了，该怎么做呢？话不多说，直接上代码。

vue的html部分如下：

        <el-table-column prop="planName" label="重要事项" align="center">
          <template slot-scope="scope">
            <el-tooltip :disabled="!scope.row.tooltipFlag" effect="light" placement="top">
              <!-- tooltip文本 -->
              <div v-html="scope.row.planName" slot="content" style="white-space: pre-line;width: 800px;line-height:1.5rem;font-size:14px;max-height:16rem;overflow:auto"></div>
              <!-- 表格文本，设置4行溢出就显示省略号 -->
              <div
                @mouseenter="visibilityChange(scope.row,$event)"
                style="
                  overflow: hidden;
                  display: -webkit-box;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 4;
                  -webkit-box-orient: vertical;
                  white-space: normal;
                "
              >
                {{ scope.row.planName }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>

js部分，来写这个 visibilityChange函数的方法：

    visibilityChange(row,event){
      const ev = event.target
      if (ev.clientHeight < ev.scrollHeight) {
        // 如果实际内容高度 > 文本高度 ，就代表内容溢出了
        this.$set(row,'tooltipFlag',true);
      } else {
        // 否则为不溢出
        this.$set(row,'tooltipFlag',false);
      }
    }

ok，解决！