表格自定义内容，实现超出内容省略提示

在elementUI和iview组件库中，都有对应参数设置，当内容过长被隐藏时显示 tooltip。但是当表格的一个单元格的内容过于复杂，需要自定义时，通常官网给出的配置参数会失去效果。

入上图所示，可以使用组件库提供的 tooltip组件+ mouseover 事件实现，对应效果，代码如下

<!-- 模板代码 -->
<Table
  border
  :columns="columns"
  :data="tableData"
  class="doc-table">
  <template slot-scope="{ row }" slot="name">
   <Tooltip
     :content="row.name"
     transfer
     placement="top"
     max-width="500"
     :disabled="isShowTooltip"
     class="title-part" 
     :style="[-2, -3].includes(row.status)? 'width: calc(100% - 96px)' : 'width: 100%'">
     <div class="singe-line"
          @mouseover="onMouseOver($event.target)">
     　　{{ row.name }}
    　</div>
     </Tooltip>
     <div class="load" v-if="[-2].includes(row.status)">
       <Icon type="ios-loading" size="18" class="icon-load"></Icon>
         文档解析中
     </div>
     <div class="error" v-if="row.status === -3">
    　　<Tooltip 
　　　　　　max-width="300"
          content="文档格式异常建议用office转换后再次上传"
          placement="top">
          <Icon type="ios-alert-outline" />
       </Tooltip>
          文档解析失败
     </div>
    </template>
</Table>

// Tooltip是否禁用标识 默认禁用
  isShowTooltip: boolean = true;
// 表格鼠标移入事件
  onMouseOver(target: any) {
     // 判断是否开启tooltip功能
    if (target.scrollWidth > target.clientWidth) {
      this.isShowTooltip = false;
    } else {
      this.isShowTooltip = true;
    }
  }

// 样式代码
// 单行文本隐藏
.singe-line {
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
  }