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

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

相关推荐
我命由我1234511 小时前
React - BrowserRouter 与 HashRouter、push 模式与 replace 模式、编程式导航、withRouter
开发语言·前端·javascript·react.js·前端框架·html·ecmascript
Younglina11 小时前
用AI全自动生成连环画?我试了,效果惊艳!
前端·ai编程·claude
Devin_chen11 小时前
ES6 Class 渐进式详解
前端·javascript
小番茄夫斯基11 小时前
前端开发的过程中,需要mock 数据,但是走的原来的接口,要怎么做
前端·javascript
peachSoda711 小时前
前端想转AI全栈-初步练习记录
前端·人工智能
树上有只程序猿11 小时前
低代码平台选型指南,10 款热门工具对比
前端·后端
@PHARAOH11 小时前
WHAT - 硬链接 hard link 和软链接 symlink
前端
cyforkk12 小时前
前端限流实战:从 429 状态码处理到消除“双重报错”
前端·状态模式
陈林梓12 小时前
Qiankun 微前端配置详解
前端