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

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

相关推荐
落霞的思绪1 小时前
配置React和React-dom为CDN引入
前端·react.js·前端框架
Hacker_Z&Q1 小时前
CSS 笔记2 (属性)
前端·css·笔记
Anastasiozzzz1 小时前
LeetCode Hot100 295. 数据流的中位数 MedianFinder
java·服务器·前端
Exquisite.2 小时前
Nginx
服务器·前端·nginx
打小就很皮...2 小时前
dnd-kit 实现表格拖拽排序
前端·react.js·表格拖拽·dnd-kit
Ulyanov2 小时前
从静态到沉浸:打造惊艳的Web技术发展历程3D时间轴
前端·javascript·html5·gui开发
打小就很皮...2 小时前
React 19 + Vite 6 + SWC 构建优化实践
前端·react.js·vite·swc
Highcharts.js2 小时前
使用Highcharts与React集成 官网文档使用说明
前端·react.js·前端框架·react·highcharts·官方文档
这是个栗子2 小时前
AI辅助编程(二) - 通译千问
前端·ai·通译千问
VT.馒头3 小时前
【力扣】2625. 扁平化嵌套数组
前端·javascript·算法·leetcode·职场和发展·typescript