解决el-select文字过长显示不全问题，使用el-tooltip解决-摩杜云开发者社区

需求场景：

有时候经常有输入一些表单数据，然后再修改的时候某些选项不能修改。

特别是el-select被disabled的时候经常出现显示不全的问题，后面的文字直接看不见了。

解决方案：

//html部分
													<el-tooltip
                            v-model:visible="visibleEnum"
                            :content="item.name"
                            placement="bottom"
                            effect="light"
                            trigger="click"
                            virtual-triggering
                            :virtual-ref="triggerRefEnum"
                          />
                            //下拉框
                          <el-select
                            v-model="item.name"
                            class="m-2"
                            //鼠标移入 触发tooltip 移出 关闭tooltip
                            @mousemove="item.visibleEnum = true"
                            @mouseout="item.visibleEnum = false"
                          >
                            <el-option
                              v-for="item in options"
                              :key="item.code"
                              :label="item.name"
                              :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)
})

效果如图：

解决el-select文字过长显示不全问题，使用el-tooltip解决_elementPlus

用:title写在el-select里面也可以生效，但是有一个问题无法解决就是当select处于disabled状态的时候:title无法激活，导致无法查看超长的内容，而使用虚拟触发的tooltip则可以解决这个问题。