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

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

相关推荐
仟濹4 小时前
【HTML】基础学习【数据分析全栈攻略:爬虫+处理+可视化+报告】
大数据·前端·爬虫·数据挖掘·数据分析·html
小小小小宇5 小时前
前端WebWorker笔记总结
前端
小小小小宇5 小时前
前端监控用户停留时长
前端
小小小小宇5 小时前
前端性能监控笔记
前端
烛阴6 小时前
Date-fns教程:现代JavaScript日期处理从入门到精通
前端·javascript
全栈小56 小时前
【前端】Vue3+elementui+ts,TypeScript Promise<string>转string错误解析,习惯性请出DeepSeek来解答
前端·elementui·typescript·vue3·同步异步
穗余6 小时前
NodeJS全栈开发面试题讲解——P6安全与鉴权
前端·sql·xss
穗余7 小时前
NodeJS全栈开发面试题讲解——P2Express / Nest 后端开发
前端·node.js
航Hang*8 小时前
WEBSTORM前端 —— 第3章:移动 Web —— 第4节:移动适配-VM
前端·笔记·edge·less·css3·html5·webstorm
江城开朗的豌豆8 小时前
JavaScript篇:a==0 && a==1 居然能成立?揭秘JS中的"魔法"比较
前端·javascript·面试