el-cascader插件 选中值和初始值相同时不能触发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'