解决ElementUI cascade级联选择器组件自动清除选中值的方法

最新推荐文章于 2025-02-20 00:02:37 发布

原创最新推荐文章于 2025-02-20 00:02:37 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

Vue学习同时被 2 个专栏收录

7 篇文章

订阅专栏

Element踩雷

4 篇文章

订阅专栏

本文介绍了在使用ElementUI的cascader级联选择器时遇到的选中值自动回显问题，详细说明了问题现象，并提供了一个有效的解决方法，包括cascader组件代码、dialog弹窗代码以及关闭dialog时触发的处理函数，确保在取消选择后不会显示之前的数据。

在做省市地级联选择器时，遇到的级联选择器重复点击问题回显上一个选择过的选项

这个问题确实挺烦人的，功能是不影响的，但是给人不是感觉特别的舒服

感谢大佬的解决方法elementUI的cascader级联选择控件使用采坑：设置默认值回显问题解决方案（亲测有效！）

解决方法：

1.这是我的cascader级联选择器代码

<el-cascader
                ref="cascader"
                style="width: 328px"
                filterable
                clearable
                :options="options"
                v-model="form.selectedOptions"
                @change="handleChange"
              >
              </el-cascader>

2.这是我的dialog代码

 <el-dialog
          :title="this.dialogTitle"
          :visible.sync="showAddAddr"
          width="508px"
          @closed="closeDialog" //关闭dialog时触发的函数
        >
    //这里写自己的代码
 </el-dialog>

3.这是我关闭dialog时触发的方法

closeDialog() {
      // 关闭Dialog时清空cascader数据
        if (this.$refs.cascader) {//这里的cascader是定义的ref名
            this.$refs.cascader.$refs.panel.activePath = [] //cascader同上
            this.$refs.cascader.$refs.panel.calculateCheckedNodePaths()//cascader同上
        }
    },

以上可解决问题