在 Element UI 框架中，el-table-column 属性 show-overflow-tooltip 意思是：当内容过长被隐藏时显示 tooltip（默认值为 false）。但是有时候会出现一些莫名其妙的BUG，比如，和 el-form 配合使用时，鼠标碰上去会显示报错的信息而不是内容的信息，还有一些很奇葩的显示。所以本文给大家带来一个替代方案...
解决方案：el-tooltip + filter + ellipsis
下面举例一个伪代码（此场景是对el-table可进行编辑单元格），思路看懂了就行，用的也是此框架中的另一个组件——“el-tooltip”。
HTML
<el-table-columnlabel="自定义名称"><templateslot-scope="scope"><el-tooltipeffect="dark" :content="scope.row.customparamName" :disabled="scope.row.customparamName | ellipsis"placement="top"><div><spanv-if="scope.row.isRead"class="ellipsis diyname-ellipsis-width">{{ scope.row.customparamName }}</span><el-form-itemv-else :prop="'table.' + scope.$index + '.customparamName'" :rules="rules.customparamName"><el-inputclass="edit-input"v-model="scope.row.customparamName"placeholder="输入自定义名称"/></el-form-item></div></el-tooltip></template></el-table-column>
Ps：注意这里 el-tooltip 子节点里只能有一个节点，多个的话会出BUG。
Style
.diyname-ellipsis-width { display: inline-block; width: 118px; } .ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
JS
filters: { ellipsis (value) { // console.log('ellipsis value:'+ value)letwidth=getTextWidth(value) // console.log(width)if (width>110) { returnfalse } returntrue } }
