el-cascader插件 选中值和初始值相同时不能触发change事件

575 阅读1分钟

el-cascader 在赋值默认值之后, 切换其他选项再次选中默认值是, 不触发change事件。

面向百度编程后发现大都是在node_modules中修改源码的操作。

感觉不是很友好, 想到通过继承重写一下(写法没有改变, 只是通过继承的方式, 避免操作源码)。

开始

在components中创建CusCascader/index.vue 内容:

<script>
import { Cascader } from 'element-ui'
export default {
  extends: Cascader,
  watch: {
    checkedValue(e) {
      let t = this.value
      let i = this.dropDwonVisible
      let n = this.config
      let r = n.checkStrictly
      let s = n.multiple
      !blur(t) || (this.computePresentContent(), s || r || !i || this.toggleDropDownVisible(!1), this.dispatch('ElFormItem', 'el.form.change', [e]))
      this.$emit('change', e)
      this.computePresentContent()
    }
  }
}
</script>

使用

<script>
    import { CusCascader } from '@components/CusCascader'
    export default {
        components: { CusCascader }
    }
</script>
<template>
    <!-- 因为是继承, 所有参数都照常传递就好了 -->
    <CusCascader v-model="value" />
</template>