Bootstrap

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

需求:

        级联选择器在清空了输入框之后,需要同时清空弹框里面的选中样式、高亮、以及回归初始化状态只展开一级菜单:【图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(); // 初始化(只展示一级节点)
    }
},

;