el-form el-input禁用时,内容过长加省略号，并根据是否有省略号来控制提示是否显示

最新推荐文章于 2024-05-24 18:21:02 发布

Chinese femdom

最新推荐文章于 2024-05-24 18:21:02 发布

阅读量1.5k

点赞数

分类专栏： Vue element-ui el-tooltip 文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/qq_36689634/article/details/127423085

版权

在Vue.js项目中，使用ElementUI的el-form和el-input创建详情表单时，禁用输入框无法监听鼠标事件。通过在el-input外包裹一层元素并监听鼠标移入事件，可以实现内容过长时省略号的显示，并据此控制提示信息的显示与否。注意针对不同组件，可能需要不同的层级选择器来获取到内部的input元素。

摘要由CSDN通过智能技术生成

vue项目，el-form详情表单，直接给表单禁用了。
input禁用时是无法监听鼠标进入函数的！mouseenter和mouseover都监听不到。只读可以监听到。
我根据百度帖子部分网友的推荐，在el-input外套一层元素。可以监听元素的鼠标移入事件，一层层获取到input.el-input__inner。然后做判断，控制提示显示与否。

<el-form-item label="" prop="name" >
     <el-tooltip :content="name" :disabled="!showTooltip">
          <span @mouseenter="vc">
               <el-cascader
                   v-model