el-cascader 选择最后一级后收起选择框

阿阿源。

已于 2023-05-16 20:10:54 修改

阅读量420

点赞数

分类专栏： elementui 文章标签： vue.js 前端 javascript

于 2023-05-16 20:09:01 首次发布

本文链接：https://blog.csdn.net/m0_60370017/article/details/130713075

版权

elementui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue.js应用中使用ElementUI的el-cascader组件，通过设置`v-model`、`:props`属性和监听`@change`事件来实现级联选择。同时，展示了如何判断选中节点是否存在下级以及在最后一级时自动收起下拉菜单的方法。

摘要由CSDN通过智能技术生成

<el-cascader
  ref="cascaderItem"
  v-model="currentValue"
  :props="{ checkStrictly: true }"
  clearable
  popper-class="select-view"
  @change="selectChange"></el-cascader>

// data[0].hasChildren 判断是否还存在下级
// getCheckedNodes() 获取选中的节点

// 最后一级时收起
selectChange(){
   const data = this.$refs['cascaderItem'].getCheckedNodes()
   !data[0].hasChildren && this.$refs['cascaderItem'].toggleDropDownVisible()
}

elementui el-cascader 级联选择器