解决冲突

src/components/AreaSelector/index.vue

 <template>
   <div>
-    <el-select v-model="formData.country" :disabled="readonly">
+    <el-select v-model="formData.country" :disabled="readonly" :style="{width: inputWidth}">
       <el-option v-for="(item) in treeList" :key="item.id" :value="item.id" :label="$l(item, 'title')" />
     </el-select>
-    <el-select v-model="formData.province" class="ml-10" :disabled="readonly">
+    <el-select v-model="formData.province" class="ml-10" :disabled="readonly" :style="{width: inputWidth}">
       <el-option v-for="(item) in provinceList" :key="item.id" :value="item.id" :label="$l(item, 'title')" />
     </el-select>
-    <el-select v-model="formData.city" class="ml-10" :disabled="readonly">
+    <el-select v-model="formData.city" class="ml-10" :disabled="readonly" :style="{width: inputWidth}">
       <el-option v-for="(item) in cityList" :key="item.id" :value="item.id" :label="$l(item, 'title')" />
     </el-select>
   </div>
@@ -19,7 +19,8 @@ export default {
     country: Number,
     city: Number,
     province: Number,
-    readonly: Boolean
+    readonly: Boolean,
+    inputWidth: String
   },
   data() {
     return {
@@ -60,9 +61,12 @@ export default {
     },
     'formData.country'(country) {
       this.$emit('countryChange', country)
+      this.formData.province = null
+      this.formData.city = null
     },
     'formData.province'(province) {
       this.$emit('provinceChange', province)
+      this.formData.city = null
     }
   },
   created() {