el-cascader 级联选择器清空初始化

最新推荐文章于 2025-04-03 12:07:32 发布

努力学习~冲鸭

最新推荐文章于 2025-04-03 12:07:32 发布

阅读量7k

点赞数 12

分类专栏： elementUI 文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/keke11211/article/details/120530343

版权

elementUI 专栏收录该内容

15 篇文章

订阅专栏

当Vue.js应用中的级联选择器(cascader)清空输入框后，可以通过设置组件的内部属性来恢复初始化状态，包括清空选中值、取消选中状态、消除高亮并仅显示一级菜单。实现这一功能的关键代码包括设置checkedValue、clearCheckedNodes、activePath及syncActivePath等方法。

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

需求：

级联选择器在清空了输入框之后，需要同时清空弹框里面的选中样式、高亮、以及回归初始化状态只展开一级菜单：【图1 变图2】

解决办法：

判断输入框为空值之后做以下操作恢复到初始化状态：

this.$refs.myCascader.$refs.panel.checkedValue = []; // 清空选中值

this.$refs.myCascader.$refs.panel.clearCheckedNodes(); // 清空级联选择器选中状态

this.$refs.myCascader.$refs.panel.activePath = []; // 清除高亮

this.$refs.myCascader.$refs.panel.syncActivePath(); // 初始化（只展示一级节点）

完整代码：

<el-cascader
    v-model="value"
    :options="options"
    clearable
    ref="myCascader"
    @change="handleChange">
</el-cascader>


data() {
    return {
        value: [],
        options: [
            {
                value: 'systerm',
                label: '系统管理',
                children: [
                    {
                        value: 'user',
                        label: '用户管理',
                        children: [
                            {
                                value: 'add',
                                label: '添加'
                            },
                            {
                                value: 'edit',
                                label: '编辑'
                            }
                        ]
                    }
                ]
            },
            {
                value: 'company',
                label: '公司管理',
                children: [
                    {
                        value: 'department',
                        label: '部门管理',
                        children: [
                            {
                                value: 'search',
                                label: '查询'
                            },
                            {
                                value: 'delete',
                                label: '删除'
                            }
                        ]
                    }
                ]
            }
        ],
    }
}


// 级联选择框切换事件
handleChange(data) {
    this.value = data;
    if(this.value && this.value.length == 0) {
        this.$refs.myCascader.$refs.panel.checkedValue = []; // 清空选中值
        this.$refs.myCascader.$refs.panel.clearCheckedNodes(); // 清空级联选择器选中状态
        this.$refs.myCascader.$refs.panel.activePath = []; // 清除高亮
        this.$refs.myCascader.$refs.panel.syncActivePath(); // 初始化（只展示一级节点）
    }
},