elementUI select多级联动

需求：编辑时将值回显，若某一级修改，之后的全部清空

实现：通过watch监听值的改变，若改变，清空后一级的值，并调用方法请求下一级的option

问题：编辑赋值的时候也会触发watch，导致只能讲第一级的值回显，之后的被清空

解决：在select上添加回调方法visible-change，可以得到当前改变的值是编辑回显还是用户手动修改，通过一个变量控制，从而控制是否需要清空

代码：

dom： 

<el-form-item label="地址">
    <el-select v-model="form.province" placeholder="请选择省份" size="mini" value-key="id" @visible-change="handleChangeFlag">
        <el-option v-for="(item, index) in provinceOption" :key="index" :label="item.areaName" :value="item"></el-option>
    </el-select>
</el-form-item>
<el-form-item>
    <el-select v-model="form.city" placeholder="请选择城市" size="mini" value-key="id" @visible-change="handleChangeFlag">
        <el-option v-for="(item, index) in cityOption" :key="index" :label="item.areaName" :value="item"></el-option>
    </el-select>
</el-form-item>
<el-form-item>
    <el-select v-model="form.area" placeholder="请选择区县" size="mini" value-key="id" @visible-change="handleChangeFlag">
        <el-option v-for="(item, index) in countyOption" :key="index" :label="item.areaName" :value="item"></el-option>
    </el-select>
</el-form-item>

js：

添加变量：

changeFlag: false

watch: {
            'form.province'(e) {
                if( this.changeFlag ){
                    this.form.city = {}
                }
                if( e && e.id ){
                    this.handleGetCityList({ parentId: e.id })
                }
            },
            'form.city'(e) {
                if( this.changeFlag ){
                    this.form.area = {}
                }
                if( e && e.id ){
                    this.handleGetAreaList({ parentId: e.id })z
                }
            },
            'form.area'(e) {
                if( this.changeFlag ){
                    this.form.projectaddress = ''
                }
            }
        },

handleChangeFlag(type) {// select回调，判断当前下拉框是否展示
  this.changeFlag = type;
}