ElementUI Table实现多行省略，鼠标移动上去显示所有文字内容

直接上代码：

<template>
  <el-tooltip effect="dark" placement="top-start" :disabled="disabled">
    <div slot="content" :style="{ 'max-width': maxWidth + 'px' }">
      {{ text }}
    </div>
    <div :style="style" @mouseenter="showTips($event)">
      {{ text }}
    </div>
  </el-tooltip>
</template>

<script>
export default {
  name: "TextTooltip",
  props: {
    // 文字内容
    text: {
      default: "",
    },
    // 超出多少行省略
    lineClamp: {
      type: Number,
      default: 2,
    },
    // tooltip最大宽度限制
    maxWidth: {
      type: Number,
      default: 400,
    },
  },
  data() {
    return {
      disabled: true,
    };
  },
  computed: {
    style() {
      return {
        display: "-webkit-box",
        "text-overflow": "ellipsis",
        overflow: "hidden",
        "-webkit-line-clamp": this.lineClamp,
        "-webkit-box-orient": "vertical",
      };
    },
  },
  methods: {
    showTips(obj) {
      /*obj为鼠标移入时的事件对象*/
      /*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
      let TemporaryTag = document.createElement("span");
      let text = this.text;
      if (typeof text == "string") {
        text = text.replace(/[\'\"\\\/\b\f\n\r\t]/g, "");
      }

      TemporaryTag.innerText = text;
      //   TemporaryTag.className = "getTextWidth";
      TemporaryTag.style.fontSize = "14px";
      this.$root.$el.appendChild(TemporaryTag);
      let currentWidth = TemporaryTag.offsetWidth;
      /*cellWidth为表格容器的宽度*/
      const cellWidth = obj.target.offsetWidth;
      /*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/
      currentWidth > this.lineClamp * cellWidth
        ? (this.disabled = false)
        : (this.disabled = true);
      //   console.log(this.disabled);
      TemporaryTag.parentNode.removeChild(TemporaryTag);
    },
  },
};
</script>

使用Demo

      <el-table-column label="事件描述" width="300">
        <template slot-scope="{ row }">
          <text-tooltip :text="row.desc" :line-clamp="5" />
        </template>
      </el-table-column>