下面请看详细内容
会出现下图情况
弹窗能正常关闭 但是下拉框选项面板仍然存在
解决思路1:
本来想的是监听dialog的Esc关闭事件 关闭时修改el-select-dropdown的css样式 将display = none
这个没实现
解决思路2:
看官网发现有个失焦事件 他手动触发失焦的话 会自动收起下拉面板
弹窗监听关闭的事件closed
<el-dialog title="添加新菜" :close-on-click-modal="false" :visible.sync="visible" :closed="menuSelect" width="50%">
给el-select 加上ref 起个小名 menuOptions
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="字段1" prop="menu">
<el-select v-model="menu" style="width:100%;" clearable ref="menuOptions">
<el-option v-for="item in menuOptions" :disabled="item.disable == 1" :key="item.key" :label="item.label" :value="item.key">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
dialog事件
menuSelect() {
setTimeout(() => {
this.$refs.menuOptions.blur()
}, 50)
}
这里有个需要注意的点 blur事件 需要setTimeout包上否则会报错
vue.runtime.esm.js:587 [Vue warn]: Error in render: “TypeError: Cannot read properties of undefined (reading ‘blur’)”
我感觉可能是同步异步执行顺序的事吧
加定时器是看到这位博主的方法 感谢~
http://t.csdnimg.cn/I3zO0