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

最新推荐文章于 2024-01-10 09:17:31 发布

不会有人真的学前端吧

最新推荐文章于 2024-01-10 09:17:31 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue学习 Element踩雷

本文链接：https://blog.youkuaiyun.com/fun_kunkun/article/details/119725504

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

感谢大佬的解决方法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-di