elementPlus 的el-select在提示框关闭时自动弹出的问题解决
更新时间：2024年01月23日 14:55:03 作者：Lan.W
这篇文章主要介绍了elementPlus 的el-select在提示框关闭时自动弹出闭时自动弹出的问题,主要问题就是因为filterable属性,根本解决方案是选中的时候让他失去焦点 el-select有一个visible-change事件,下拉框出现/隐藏时触发,感兴趣的朋友跟随小编一起看看吧
问题：
当el-select添加filterable属性时，弹提示窗时，点击确定后，下拉框会自动弹出
分析：
主要问题就是因为filterable属性，根本解决方案是选中的时候让他失去焦点 el-select有一个visible-change事件，下拉框出现/隐藏时触发
解决：
增加了visible-change事件
change: (item) => {
console.log('弹窗出select', item)
if (item) {
vm.$refs.select.focus()
} else {
vm.$refs.select.blur()
}
},el-select事件最后增加焦点取消
vm.$refs.select.blur()
Html源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/vue3.3.8/vue.global.js"></script>
<link rel="stylesheet" href="../js/elementPlus/index.css" rel="external nofollow" >
<script src="../js/elementPlus/index.full.js"></script>
<title></title>
</head>
<body>
<div id="app">
<el-divider></el-divider>
<el-select v-model="value" filterable remote reserve-keyword remote-show-suffix placeholder="请选择" ref='select'
@change="handleCustomerChange" :loading="false"
@visible-change='change'>
<!-- <el-select v-model="value" filterable placeholder="请选择" ref='select'>-->
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-divider></el-divider>
<el-button @click="showModal('弹窗')">打开对话框</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</body>
<script type="module">
import zhCn from "../js/elementPlus/locale/zh-cn.mjs";
const {createApp, ref} = Vue
const {ElMessageBox} = ElementPlus
const app = createApp({
setup() {
const showModal = (message) => {
ElMessageBox.alert(
message,
'提示',
{
confirmButtonText: '确认',
callback: (res) => {
console.log('点击了', res)
}
})
}
const options = ref([{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}])
const value = ref('')
const dialogVisible = ref(false)
const handleClose = (done) => {
console.log(done)
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {
});
}
return {
value, dialogVisible, options, showModal,
handleClose,
change: (item) => {
console.log('弹窗出select', item)
if (item) {
vm.$refs.select.focus()
} else {
vm.$refs.select.blur()
}
},
handleCustomerChange: (e, item) => {
console.log('变更select', e, item)
let filters = options.value.filter(item => item.value = e)
value.data = filters[0].lang
vm.$refs.select.blur()
}
}
}
})
app.use(ElementPlus, {locale: zhCn})
const vm = app.mount('#app')
</script>
</html>到此这篇关于elementPlus 的el-select在提示框关闭时自动弹出闭时自动弹出的文章就介绍到这了,更多相关elementPlus el-select提示框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了vue中用H5实现文件上传的方法实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
因产品需求和UI样式调整，本文主要实现elementUI下拉选项加多选框的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要为大家详细介绍了vue拖拽排序插件vuedraggable的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
今天小编就为大家分享一篇vue获取form表单的值示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要为大家详细介绍了Vue.js实现可编辑的表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
Vue中对比scoped css和css module的区别
这篇文章主要介绍了Vue中scoped css和css module的区别对比，scoped css可以直接在能跑起来的vue项目中使用而css module需要增加css-loader配置才能生效。具体内容详情大家参考下本文2018-05-05
这篇文章主要介绍了vue中怎样让函数只执行一次问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）
这篇文章主要介绍了Vue+Element动态表单动态表格，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要为大家详细介绍了vue实现整屏滚动切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
vue2使用el-date-picker实现动态日期范围demo
这篇文章主要为大家介绍了vue2使用el-date-picker实现动态日期范围示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
最新评论