您的位置:首页 > 财经 > 金融 > 点击el-select时,如果不满足操作条件,不能弹出下拉列表,同时要弹出错误提示

点击el-select时,如果不满足操作条件,不能弹出下拉列表,同时要弹出错误提示

2025/1/9 1:51:41 来源:https://blog.csdn.net/weixin_46190955/article/details/141824164  浏览:    关键词:点击el-select时,如果不满足操作条件,不能弹出下拉列表,同时要弹出错误提示
**目标需求:**
点击el-select时,如果不满足操作条件,不能弹出下拉列表,同时要弹出错误提示
**实现方式:**
利用disabled控制el-select是否可操作,并给el-select添加{pointer-events:none}样式,当不满足条件时,就让el-select禁用,同时在<el-select>外面包一层<div>, 给div添加点击事件,el-select被禁用点击时无反应,但是div有反应,在div的点击事件里添加自己的提示逻辑即可
**出现的问题:**
可以实现想要的效果,但是会导致一个问题,当el-select可操作时,点击el-select的输入框时不能聚焦,也不能弹出下拉框,必须要点击下拉图标才会弹出下拉列表
**解决办法:**
动态控制{pointer-events:none}样式,当el-select禁用的时候再添加这个样式就可以了

代码如下:

<template><el-selectv-model="val"placeholder="请输入"size="mini":class="[isDisable ? 'pointer-style' : '']":disabled="isDisable"clearablefilterable@change="valChange"><el-optionv-for="item in selectList":key="item.id":label="item.name":value="item.code"></el-option></el-select>
</template>    
<style>
.pointer-style{pointer-events:none
}
<style>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com