说明：设置固定宽度。
文字超出宽度，用...显示。鼠标悬停到文字上，用el-tooltip显示全部文字内容
如果文字未超出宽度，el-tooltip、el-popover隐藏。
html:
1 <el-tooltip :content="node.label" placement="bottom" effect="light" :disabled="isShowTooltip">
2 <span class="treeLabel" @mouseenter="visibilityChange($event)"> {{ node.label }}</span>
3 </el-tooltip>
4
5 <!--或者-->
6 <!--<el-popover :content="item.remark" :width="320" trigger="hover" placement="bottom" :disabled="isShowTooltip">
7 <template #reference>
8 <div class="remark" @mouseenter="visibilityChange($event)">{{ item.remark }}</div>
9 </template>
10 </el-popover>-->
js:
1 const isShowTooltip = ref(false)
2
3 // 是否显示tip
4 function visibilityChange (event) {
5 const ev = event.target
6 const evWeight = ev.scrollWidth
7 const contentWeight = ev.clientWidth
8 if (evWeight > contentWeight) {
9 // 实际宽度 > 可视宽度 文字溢出
10 isShowTooltip.value = false
11 } else {
12 // 否则为不溢出
13 isShowTooltip.value = true
14 }
15 }
css:
.treeLabel ,.remark {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
https://www.jianshu.com/p/b39d2124d911
标签：文字,el,const,提示,tooltip,宽度,ev From： https://www.cnblogs.com/xuwupiaomiao/p/17285700.html