element ui 级联选择器 选择最后一节点关闭下拉框

博客介绍了在Vue应用中使用Element UI的Cascader组件时,如何配置props以确保在选择最后一级节点后自动关闭下拉框。通过设置`checkStrictly`为`true`,并结合`handleChange`方法判断是否为最后一级节点,实现下拉框的自动关闭功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

官网自带的选择最后一节点不会关闭下拉框的

修改如下:props里一定要加上这个参数 checkStrictly:true

<el-cascader
    ref="cascaders"
    :options="options"
    :props="{ checkStrictly: true }"
     clearable
    @change="handleChange"
>
</el-cascader>


methods:{

    handleChange() {
      const obj = this.$refs["cascaders"].getCheckedNodes();
      // 判断是否是最后一级
      !obj[0].hasChildren&&
      this.$refs.cascaders.toggleDropDownVisible();
    },
}

有不正确的地方,欢迎指出。 

### 如何在 Element UI 的 `el-cascader` 中取消选中项 在使用 Element UI 的 `el-cascader` 组件时,如果需要清除已选中的值,可以通过绑定的 `v-model` 数据来实现。具体来说,将该数据设置为空数组即可完成清空操作[^1]。 以下是具体的实现方式: #### 方法:通过 Vue 数据模型控制 由于 `el-cascader` 是基于双向绑定设计的组件,其选中状态由 `v-model` 控制。因此,只需将绑定的数据重置为个空数组,就可以达到清空的效果。 ```vue <template> <div> <el-cascader v-model="selectedValue" :options="options"></el-cascader> <el-button @click="clearSelection">清空</el-button> </div> </template> <script> export default { data() { return { selectedValue: [], // 初始值为空数组 options: [ { value: 'zhinan', label: '指南', children: [ { value: 'shejiyuanze', label: '设计原则' } ] } ] }; }, methods: { clearSelection() { this.selectedValue = []; // 将绑定值设为空数组以清空选择 } } }; </script> ``` 此方法利用了 Vue 的响应式特性,在点击按钮时调用 `clearSelection` 函数,将 `selectedValue` 设置为空数组,从而实现了清空功能[^2]。 #### 方法二:解决动态更新后的高亮问题 当级联选择器的内容需要动态变化时,可能会遇到即使清空了选中值,下拉框仍然显示之前的选项被高亮的情况。这是因为组件内部缓存了些状态信息。为了彻底解决问题,可以尝试重新渲染整个组件或者手动触发更新逻辑。 种简单的方式是通过 `key` 属性强制刷新组件实例: ```vue <template> <div> <el-cascader :key="cascaderKey" v-model="selectedValue" :options="dynamicOptions"></el-cascader> <el-button @click="resetCascader">清空并重置</el-button> </div> </template> <script> export default { data() { return { cascaderKey: 0, selectedValue: [], dynamicOptions: [] }; }, methods: { resetCascader() { this.selectedValue = []; this.dynamicOptions = []; // 动态修改选项列表 this.cascaderKey += 1; // 改变 key 值以强制重新渲染 } } }; </script> ``` 这种方法能够有效避免因组件未及时更新而导致的状态残留问题。 #### 注意事项 需要注意的是,某些情况下如果不小心删除了最后节点的子集字段 (`children`),可能导致无法正常触发展开或折叠行为以及抛出异常错误(如 `Cannot read property ‘level’ of null`)。为了避免此类情况发生,请确保传入的数据结构始终符合预期格式[^3]。 ### 总结 以上介绍了两种主要的方式来处理 `el-cascader` 的取消选中需求——直接清空绑定变量和结合动态加载场景下的额外优化措施。实际开发过程中可以根据项目具体情况灵活选用合适方案。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值