原理就是在鼠标浮动到el-tootip
包裹的元素时判断该元素的scrollWidth
(元素内容的实际宽度)有没有超过clientWidth
(元素的可是宽度)超出时显示省略号并设置disabled
属性为false
否则为true
代码如下:
链接:https://www.jianshu.com/p/b39d2124d911
<el-tree ref="treeRef" :default-expanded-keys="defaultExpandedKeys" :node-key="id" :data="multiple ? treeData : treeAllData" :show-checkbox="multiple" :check-strictly="false" :current-node-key="!multiple ? selected : ''" :highlight-current="!multiple" :expand-on-click-node="false" :check-on-click-node="multiple" :props="defaultProps" :filter-node-method="filterNode" :default-checked-keys="multiple ? selected : []" @node-click="handleNodeClick" @check="handleCheckChange" > <template #default="{ node }"> <el-tooltip :disabled="isShowTooltip" :content="node.label" popper-class="filter-box-item" placement="top-start" effect="light" > <div class="el-tree-node__label ellipsis" @mouseenter="onMouseOver($event)"> <span ref="refName">{{ node.label }}</span> </div> </el-tooltip> </template> </el-tree>
const isShowTooltip = ref(false); const onm ouseOver = (event: any) => { const ev = event.target; const evWeight = ev.scrollWidth; const contentWeight = ev.clientWidth; if (evWeight > contentWeight) { // 实际宽度 > 可视宽度 文字溢出 isShowTooltip.value = false; } else { // 否则为不溢出 isShowTooltip.value = true; } };
标签:el,false,省略号,dom,isShowTooltip,const,ev From: https://www.cnblogs.com/lsc-boke/p/18039619