el-cascader 初始化未清空

143 阅读1分钟

这个问题是选中以后点击清空,虽然v-model的字段清空了,但是及联选择器的选择未清空

image.png

<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>