解决el-table tooltip内容过长无法滚动问题

在el-tooltip基础上二次封装：

<template>

  <div class="text-tooltip">

    <el-tooltip class="item" effect="dark" :disabled="isShowTooltip" :content="content" placement="top"

      :visible-arrow="true">

      <p class="over-flow" :class="className" @mouseover="onMouseOver(refName)">

        <span :ref="refName">{{content||'-'}}</span>

      </p>

    </el-tooltip>

  </div>

</template>

 

<script>

export default {

  name: 'textTooltip',

  props: {

    // 显示的文字内容

    content: {

      type: String,

      default: () => {

        return ''

      }

    },

    // 外层框的样式，在传入的这个类名中设置文字显示的宽度

    className: {

      type: String,

      default: () => {

        return ''

      }

    },

    // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）

    refName: {

      type: String,

      default: () => {

        return ''

      }

    }

  },

  data() {

    return {

      isShowTooltip: true

    }

  },

  methods: {

    onMouseOver(str) {

      let parentWidth = this.$refs[str].parentNode.offsetWidth;

      let contentWidth = this.$refs[str].offsetWidth;

      // 判断是否开启tooltip功能

      if (contentWidth > parentWidth) {

        this.isShowTooltip = false;

      } else {

        this.isShowTooltip = true;

      }

    }

  }

}

</script>

 

<style lang="scss" scoped>

.over-flow {

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

}

.wid190 {

    width: 100%;

}

p{

    margin: 0;

}

  // 修改外边线的样式

  ::v-deep .tableTypePopperClass[x-placement^=bottom] .popper__arrow{

    border-bottom-color: #EBEEF5!important;

  }

  // 修改内三角的样式

  ::v-deep .tableTypePopperClass[x-placement^=bottom] .popper__arrow:after {

    border-bottom-color: #FFF!important;

  }

 

  // 修改tooltip 从顶部弹出时 箭头的样式

  ::v-deep .tableTypePopperClass[x-placement^=top] .popper__arrow{

    border-top-color: #EBEEF5!important;

  }

  ::v-deep .tableTypePopperClass[x-placement^=top] .popper__arrow:after {

    border-top-color: #FFF!important;

  }

</style>

 

使用：

 <el-table-column label="说明" align="center" prop="remarks" width="150">

          <template slot-scope="scope">

            <tooltip-over

              :content="scope.row.remarks"

              class="wid190"

              refName="tooltipOver"

            ></tooltip-over>

          </template>

</el-table-column>

...

import tooltipOver from "../../../components/Tooltip";

...

components: {

    tooltipOver,

  },