如何解决element

element-ui 对于大家来说再熟悉不过了，中后台系统经常使用。我们在使用 table 组件展示数据时，对于文本过长的单元格添加show-overflow-tootip 属性后，tooltip 的宽度会撑满屏幕。

如下图：

上面这种方法的缺点显而易见，会造成全局样式的污染。在 table 组件源码中，可以从 table-body.js 中发现，showOverflowTooltip 的实现，也是使用了 element ui 的 tooltip 组件。

如此，这里关闭 showOverflowTooltip，用 slot 重写单元格内容，使用我们自己定义的 tooltip 样式，像这样：

<el-table-column prop="address" label="地址" width="300">
   <template slot-scope="{ row }">
        <el-tooltip  effect="dark" placement="top-start">
            <div  slot="content">{{ row.address }}</div>
            <div >{{ row.address }}</div>
        </el-tooltip>
    </template>
</el-table-column>

并且只需要在组件中修改 tooltip 提示内容的样式即可：

<style scoped>
.tooltip-content {
    width: 250px;
}
.tooltip-trigger {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>

当然，这种方法也是有缺点，就是每个单元格都会有 tooltip 逻辑，而不是在文本超出裁剪之后才显示，所以，至于使用哪种方案，大家就根据实际情况按需选择吧。