elementUI中的cascader级联选择器组件清除选中值

做公司的后台管理系统时，需要一个省市区/县三级联动选择的功能，使用到了cascader这个组件。发现点过编辑操作之后，再点击新增时选择省市区/县时，就会看到三级联动里显示的还是之前选中的值。当时想了很多办法都不管用，还去度娘那搜索了很多解决这个问题的办法，发现太难了（那些方法都解决不了我这个问题（么用））。不过最后看到一个帖子就解决了，解决方案如下：

思路：可以采用 重新渲染 的方式解决这个问题。

1、首先先在cascader中绑定key里

微信截图_20201228144528.png

2、其次在data中定义key中绑定的的值

微信截图_20201228144620.png

3、最后把重新渲染的代码写到你要用到的那个地方

微信截图_20201228144638.png

查看我项目中示例代码：

1、html中代码

            <el-col :span="24">
              <el-form-item label="所在区域" prop="region">
                <el-cascader
                  :key="refreshItem"
                  style="width:320px"
                  :options="cityData"
                  v-model="form.region"
                  placeholder="请选择省市县"
                  @change="changelocation"
                />
              </el-form-item>
            </el-col>

2、js

    import cities from '@/utils/city.json'     (此处是我项目中地图json)
    export default {
       data() {
          return {
            // 重新渲染级联选择器
            refreshItem: 0,
            // 获取详细地址
            cityData: [],
          }
       },
       mounted() {
         this.cityData = cities
       },
       methods: {
          // 取消  (因为我这个项目中的这个cascader级联选择器是写在dialog对话框里的，
         // 所以我在点击确定取消时我就重新渲染了一下，
         // 此处我只写在了取消事件里，
         // 因为我的确定提交事件里调用了cancle() )
          cancle() {
            this.refreshItem++;
          }
       }
    }