这个问题是选中以后点击清空,虽然v-model的字段清空了,但是及联选择器的选择未清空
<template>
<div>
<el-cascader
:options="options"
:props="props"
collapse-tags
clearable
ref="myCascader"
@change="resetMyCascader"
></el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
props: { multiple: true },
options: [
{
value: 1,
label: "东南",
children: [
{
value: 2,
label: "上海",
children: [
{ value: 3, label: "普陀" },
{ value: 4, label: "黄埔" },
{ value: 5, label: "徐汇" },
],
},
{
value: 7,
label: "江苏",
children: [
{ value: 8, label: "南京" },
{ value: 9, label: "苏州" },
{ value: 10, label: "无锡" },
],
},
{
value: 12,
label: "浙江",
children: [
{ value: 13, label: "杭州" },
{ value: 14, label: "宁波" },
{ value: 15, label: "嘉兴" },
],
},
],
},
{
value: 17,
label: "西北",
children: [
{
value: 18,
label: "陕西",
children: [
{ value: 19, label: "西安" },
{ value: 20, label: "延安" },
],
},
{
value: 21,
label: "新疆维吾尔族自治区",
children: [
{ value: 22, label: "乌鲁木齐" },
{ value: 23, label: "克拉玛依" },
],
},
],
},
],
};
},
methods:{
resetMyCascader(val){
if(val && val.length >0){
return ;
}
this.$refs.myCascader.$refs.panel.checkedValue = []; // 清空选中值
this.$refs.myCascader.$refs.panel.clearCheckedNodes(); // 清空级联选择器选中状态
this.$refs.myCascader.$refs.panel.activePath = []; // 清除高亮c
this.$refs.myCascader.$refs.panel.syncActivePath(); // 初始化(只展示一级节点
}
}
};
</script>
<style>
</style>