单纯改变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>
// 代码1
reset() {
const _cascader = this.$refs.cascader
if (_cascader) {
_cascader.$refs.panel.checkedValue = []
_cascader.$refs.panel.activePath = []
_cascader.$refs.panel.syncActivePath()
}
绑定了ref之后 ,点击重置手动修改element级联组件的值,达到恢复面板重置状态。这里指定的重置value为 [ ],也可以指定value值固定到更具体的值。