element-ui date-picker无法通过value绑值的取巧解决方案

task(任务)

将el-date-picker根据业务需求封装为自己的base-date-picker控件, 封装的控件对外也要可以通过v-model綁值

situation(情景 or 问题)

其它控件,比如select, 可以通过

<el-select :value="value" @change="emit('change',$event)"></el-select>

实现v-model的双重绑定
但是调用el-date-picker组件时, 使用:value="value"却没有办法给value赋值,也不走change事件,只能通过v-model赋值.

action(行动 or 解决方案)

因为具体原因也不是很确定, 扒了一下源码可能跟pickerVisible这个属性有关, date-picker内部更多的是emit了 blur事件, change事件走的并不多.
Anyway, 用了一个取巧的办法解决了:
思路: el-date-picker还是绑定v-model, @change的时候对外提交this.model

<el-date-picker v-model="model" @change="handleChange"></el-date-picker>
<script>
export default {
  methods:{
    handleChange(){
      this.$emit('change', this.model)
    }
  }
}
</script>

回显暂时用不到,先不实现了

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。