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

解决方案

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

 

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

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

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

完整代码：

<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(); // 初始化（只展示一级节点）
    }
},

 

原文：https://blog.csdn.net/weixin_48353638/article/details/129719128

 

<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(); // 初始化（只展示一级节点）    }},