需求:编辑时将值回显,若某一级修改,之后的全部清空
实现:通过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;
}