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

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

相关推荐
程序员Jason1 分钟前
Node.js 极简安装指南(Mac / Windows / Linux 通用,含国内镜像)
前端
半个落月5 分钟前
Vue 3 如何接住大模型的流式回答:从 ReadableStream 到可靠的 SSE 解析
前端·javascript·人工智能
蓝银草同学7 分钟前
Stream 数据统计实战:求和、平均值、分组汇总(AI 辅助学习 Java 8)
java·前端·后端
Dontla7 分钟前
Hero Section(首屏大图区 / 英雄区)介绍(Web网页落地页Landing Page最顶部的区域)
前端
问商十三载28 分钟前
2026大模型GEO优化体系:3层链路提收录,零成本提34%引用率附工具包
大数据·前端·人工智能
IT_陈寒35 分钟前
Redis过期key的坑,差点让线上服务崩了
前端·人工智能·后端
恋猫de小郭39 分钟前
AI 又又造词,Graph 就又要替代 Loop 了?
前端·人工智能·ai编程
Dontla44 分钟前
Canonical URL介绍(规范网址 / 规范链接)(Canonical Tag 规范标签)HTML标签、SEO优化
前端·html·seo
晓得迷路了1 小时前
栗子前端技术周刊第 138 期 - NestJS 12、Astro 7.1、npm 12...
前端·javascript·nestjs