在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; }