在 Element UI 框架中，el-table-column 屬性 show-overflow-tooltip 意思是：當內容過長被隱藏時顯示 tooltip（默認值為 false）。但是有時候會出現一些莫名其妙的BUG，比如，和 el-form 配合使用時，鼠標碰上去會顯示報錯的信息而不是內容的信息，還有一些很奇葩的顯示。所以本文給大家帶來一個替代方案...
解決方案：el-tooltip + filter + ellipsis
下面舉例一個偽代碼（此場景是對el-table可進行編輯單元格），思路看懂了就行，用的也是此框架中的另一個組件——“el-tooltip”。
HTML
1 <el-table-column> 2 <template slot-scope="scope"> 3 <el-tooltip effect="dark" :content="scope.row.customparamName" :disabled="scope.row.customparamName | ellipsis" placement="top"> 4 <div> 5 <span v-if="scope.row.isRead" class="ellipsis diyname-ellipsis-width">{{ scope.row.customparamName }}</span> 6 <el-form-item v-else :prop="'table.' + scope.$index + '.customparamName'" :rules="rules.customparamName"> 7 <el-input class="edit-input" v-model="scope.row.customparamName" placeholder="輸入自定義名稱" /> 8 </el-form-item> 9 </div> 10 </el-tooltip> 11 </template> 12 </el-table-column>
Ps：注意這里 el-tooltip 子節點里只能有一個節點，多個的話會出BUG。
Style
1 .diyname-ellipsis-width { 2 display: inline-block; 3 width: 118px; 4 } 5 6 .ellipsis { 7 overflow: hidden; 8 white-space: nowrap; 9 text-overflow: ellipsis; 10 }
JS
1 filters: { 2 ellipsis (value) { 3 // console.log('ellipsis value:'+ value) 4 let width = getTextWidth(value) 5 // console.log(width) 6 if (width > 110) { 7 return false 8 } 9 return true 10 } 11 }
————————————————
版權聲明：本文為CSDN博主「Lux_Sun」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/Dream_Weave/java/article/details/99687469