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 级联选择器

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

相关推荐
XPoet23 分钟前
AI 编程工程化:MCP——给你的 AI 员工打通外部能力
前端·后端·ai编程
笨笨狗吞噬者39 分钟前
小程序包体积分析利器 -- vite-plugin-component-insight
前端·微信小程序·uni-app
吴声子夜歌40 分钟前
Vue3——v-for指令
前端·javascript·vue
你的牧游哥44 分钟前
Cursor IDE Rules / Skills / Subagents 前端项目配置全指南
前端·ide
音仔小瓜皮1 小时前
【Vue】什么时候用Ref?什么时候用shallowRef?
前端·javascript·vue.js
码喽7号1 小时前
vue学习五:前端路由VueRouter
前端·vue.js·学习
史迪仔01121 小时前
[QML] 交互事件深度解析:鼠标、键盘、拖拽
前端·c++·qt
ZC跨境爬虫1 小时前
海南大学交友平台开发实战 day11(实现性别图标渲染与后端数据关联+Debug复盘)
前端·python·sqlite·html·json
GISer_Jing1 小时前
前端JS面试6大核心考点详解
前端·javascript·面试
ai大模型中转api测评1 小时前
2026年前端新工具:Gemini 3.1 SVG工作流从Prompt到部署
前端·人工智能·prompt·api