elementui 恢复级联框el-cascader的默认状态

单纯改变v-model值会有下面的情况,保留了上次的选择路径,与需求不符,所以针对这种情况做了下级联面板的重置。

elementui 恢复级联框el-cascader的默认状态_第1张图片

在官网demo基础上做修改(代码1),增加ref。新增个按钮做重置操作(代码2)

// 代码1

默认 click 触发子菜单
// 代码1   
reset() {
    const _cascader = this.$refs.cascader
    if (_cascader) {
    _cascader.$refs.panel.checkedValue = []
     _cascader.$refs.panel.activePath = [] 
    _cascader.$refs.panel.syncActivePath()
}

elementui 恢复级联框el-cascader的默认状态_第2张图片

绑定了ref之后 ,点击重置手动修改element级联组件的值,达到恢复面板重置状态。这里指定的重置value为 [ ],也可以指定value值固定到更具体的值。

elementui 恢复级联框el-cascader的默认状态_第3张图片
 

 

 

你可能感兴趣的:(前端,elementui)