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

最新推荐文章于 2024-01-10 15:40:36 发布

原创最新推荐文章于 2024-01-10 15:40:36 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js

elementui 专栏收录该内容

4 篇文章

订阅专栏

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

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

修改如下：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();
    },
}

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