El-Cascader plug-in can not trigger a change event if the selected value and the initial value are the same. No need to modify the source code

On the net a check, the discovery is to modify the source code of the program, not very friendly, so he tried

1. Lazy loading used by cascading selectors

<el-cascader ref="city" v-model="formItem.city" class="w250" :props="citys" :show-all-levels="false" :placeholder="formItem.addvnm? FormItem. Addvnm :' National '" />

PS: Because data is fetched asynchronously, callback displays placeholder by default

2. Here’s how to get the city cascade

citys: { lazy: true, emitPath: false, lazyLoad(node, resolve) { const { level } = node const params = {} if (level === 0) { params.v_name = 'PROAD_QUERY' } else if (level === 1) { params.v_name = 'CITYAD_QUERY' params.ProAdCode = node.value } else if (level === 2) { params.v_name = 'ADMINAD_QUERY' params.CityAdCode = node.value } else { return resolve([]) } getCity(params).then(res => { const nodes =  res.map(item => ({ value: item.ProAdCode || item.CityAdCode || item.AdminCode, label: item.name, leaf: Level > = 2})) if (level = = = 0) {nodes. The unshift ({value: 'all' label: 'national'})} resolve (nodes)})}},

Results the following

When editing, it was found that the country was initially selected, other cities were modified to trigger Change event, and then the country was switched back to, but it was found that Change event could not be triggered

So let’s assign a null value by default

If (type === 'add') {this.modalTitle = 'Add'} else {this.modalTitle = 'Edit' this.formItem = Object.assign({}, type) this.formItem.city = '' } this.modalShow = true this.formItem.addcd ? this.formItem.addcd : 'all' },

The key is this.FormItem. City = “and then the modal box will display and then re-assign this.FormItem. AddCD? this.formItem.addcd : ‘all’