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

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

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

// 代码1
 
<div class="block">
  <span class="demonstration">默认 click 触发子菜单</span>
  <el-cascader
    ref="cascader"
    v-model="value"
    :options="options"
    @change="handleChange"></el-cascader>
</div>

// 代码2   
reset() { //重置方法
    const _cascader = this.$refs.cascader
    if (_cascader) {
     _cascader.$refs.panel.checkedValue = [];//清除上次选中的
     _cascader.$refs.panel.activePath = [];//清除高亮
     _cascader.$refs.panel.syncActivePath()
}

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

拓展

1.

如果是在弹框里面渲染了这个级联菜单，可以使用dialog 的close事件来控制；在close事件里面添加上面重置方法里的代码，可以在弹框关闭后级联菜单恢复到默认状态。

2.

Vue使用Element的级联选择器Cascader，选中后下拉框自动关闭
在级联选择器添加一个@change方法，在@change方法中:

//选择后触发事件
//eg:
  orgChange (belongs) {
     //console.log(belongs)
     //监听值发生变化就关闭它 下面的两种写法都可以达到效果，任选其一
     //1.
     this.$refs.cascader.dropDownVisible = false; 
     //2.
     this.$refs.cascader.toggleDropDownVisible();
  },