关于前端:elcascader插件-选中值和初始值相同时不能触发change事件无需修改源码

网上一查, 发现都是批改源码的计划, 不太敌对, 所以本人尝试了一下

1. 级联选择器应用的懒加载

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

ps: 因为数据异步获取, 回显只好默认展现 placeholder

2. 以下是获取城市级联

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.unshift({ value: 'all', label: '全国'})
            }
            resolve(nodes)
          })
        }
      },

成果如下

编辑的时候发现初始选中全国, 批改其它城市触发 change 事件, 再切换回全国, 发现无奈触发 change 事件

所以先默认赋一个空值

// 编辑 / 新增
    editRead(type) {if (type === 'add') {this.modalTitle = '新增'} else {
        this.modalTitle = '编辑'
        this.formItem = Object.assign({}, type)
        this.formItem.city = ''
      }
      this.modalShow = true
      this.formItem.addcd ? this.formItem.addcd : 'all'
    },

重点就是
this.formItem.city = ”
而后模态框显示之后从新赋值
this.formItem.addcd ? this.formItem.addcd : ‘all’