ElementUI 级联选择器el-cascader启用选择任意一级选项,选中后关闭下拉框

1、启用选择任意一级选项

在 el-cascader 标签上加上配置项:

html 复制代码
 :props="{ checkStrictly: true }"

例如:

html 复制代码
<el-cascader
  ref="selectedArrRef"
  v-model="selectedArr"
  :options="optionsList"
  :props="{ checkStrictly: true }"
  @change="handleAreaChange"
/>

2、methods中添加方法

javascript 复制代码
handleAreaChange(e) {
	this.$refs.selectedArrRef.dropDownVisible = false
}

参考文档:Cascader 级联选择器

个人博客:紫琪软件工作室

相关推荐
chjif几秒前
一张照片和一段声音如何生成口播视频:MiniMax H3 音画同步实测
java·前端·javascript
lucky九年2 分钟前
deepseek harness主题插件dsh-web-theme
前端
2601_962203518 分钟前
【SpringBoot3】面向切面 AspectJ AOP 使用详解
开发语言·前端·python
XLYcmy36 分钟前
HTML/CSS/JS 基础与 Vue 技术栈深度解析
java·前端·css·html·vue3·vue2·api
新知图书1 小时前
12.3 智能体中Skill的约束与自进化实战
java·前端·数据库
风月说与山鬼1 小时前
四、Tailwind CSS——间距与尺寸
前端·css·tailwind css
en.en..1 小时前
C语言 static函数与头文件封装规范
java·c语言·前端
计算机魔术师1 小时前
旅途中用手机远程控制电脑?电脑不在身边,ToDesk/UU远程/TeamViewer移动端深度实测
前端
风月说与山鬼1 小时前
三、Tailwind CSS——排版与文字样式
前端·css·tailwind css
eokred2 小时前
图片预览组件的另一种设计:Headless、可组合、开箱即用
前端·react