需求场景：
有时候经常有输入一些表单数据，然后再修改的时候某些选项不能修改。
特别是el-select被disabled的时候经常出现显示不全的问题，后面的文字直接看不见了。
解决方案：
//html部分
<el-tooltip
v-model:visible="visibleEnum"
:content=""
placement="bottom"
effect="light"
trigger="click"
virtual-triggering
:virtual-ref="triggerRefEnum"
/>
//下拉框
<el-select
v-model=""
class="m-2"
//鼠标移入 触发tooltip 移出 关闭tooltip
@mousemove="item.visibleEnum = true"
@mouseout="item.visibleEnum = false"
>
<el-option
v-for="item in options"
:key="item.code"
:label=""
:value="item.id"
/>
</el-select>
//js部分
//虚拟节点
const triggerRefEnum = ref({
getBoundingClientRect() {
return position.value
}
})
//弹窗位置
const position = ref({
top: 0,
left: 0,
bottom: 0,
right: 0
})
//弹窗位置 跟随鼠标
const mousemoveHandler = e => {
position.value = DOMRect.fromRect({
width: 0,
height: 0,
x: e.clientX,
y: e.clientY
})
}
//监听 鼠标划入事件
onMounted(() => {
document.addEventListener('mousemove', mousemoveHandler)
})
//销毁 鼠标划入事件
onBeforeUnmount(() => {
document.removeEventListener('mousemove', mousemoveHandler)
})效果如图：
用:title写在el-select里面也可以生效，但是有一个问题无法解决 就是当select处于disabled状态的时候:title无法激活，导致无法查看超长的内容，而使用虚拟触发的tooltip则可以解决这个问题。
