elemenui 表格内容超过两行显示省略号并提示 el-tooltip

1.el-tooltip的使用

        <el-table-column prop="description" label="描述">
          <template #default="{ row }">
            <el-tooltip
              v-model="row.showTooltip"
              effect="dark"
              :content="row.description"
              placement="top"
              :disabled="!row.showTooltip"
              :open-delay="300"
            >
              <div class="description" @mouseover="isShowTooltip($event, row)">
                {{ row.description }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>

row.showTooltip 是否显示提示框 放在row里面才不会全部的描述都显示提示框

2.isShowTooltip 方法

isShowTooltip(obj, row) {
    const TemporaryTag = document.createElement('span');
    TemporaryTag.innerText = row.description;
    TemporaryTag.className = 'getTextWidth';
    document.querySelector('body').appendChild(TemporaryTag);
    const currentWidth = document.querySelector('.getTextWidth').offsetWidth;
    document.querySelector('.getTextWidth').remove();

    /* cellWidth为表格容器的宽度*/
    const cellWidth = obj.target.offsetWidth;
    /* 当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行  可以 cellWidth *2，3，4....  */
    currentWidth <= cellWidth * 2 ? (row.showTooltip = false) : (row.showTooltip = true);
  }

3.样式

<style lang="scss" scoped>
.description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>
<style lang="scss">
.el-popper.is-dark {
  width: 500px;
}
</style>

**.el-popper在容易外面所以不能使用scoped **