Element Table show-overflow-tooltip属性显示在下方的解决方案

首先来看默认的show-overflow-tooltip悬浮显示的样式：

在使用Table时可以设置超出内容通过show-overflow-tooltip属性达到悬浮显示的状态，但是这个悬浮框默认是显示在上方的。有时候我们会想让他出现在下方或者其他方向，来达到下图的效果：

解决方案如下：

<el-table-column placement="bottom" align="center" prop="model" label="型号" min-width="90">
    <template slot-scope="scope">
    	<el-popover placement="bottom" trigger="hover">
    		<template><span v-html="getFormatPopover(scope.row.model)"></span></template>
    		<span slot="reference">{{ scope.row.model }}</span>
    	</el-popover>
    </template>
</el-table-column>

placement为弹出方向，trigger为触发机制，其他自定义属性参考Popover组件的官方文档：https://element.eleme.cn/#/zh-CN/component/popover

在需要控制出现方向的表格中嵌套一层Popover组件，然后继续在该组件内定义要显示的内容以及触发目标，具体的显示逻辑自己定义好直接显示在el-popover里面template中就行了。里面默认只显示字符串，需要换行等操作只需要通过v-html转一下就行了。