美文网首页前端tips汇总
element-ui date-picker无法通过value绑

element-ui date-picker无法通过value绑

作者: 妮儿_smile | 来源:发表于2020-10-21 14:21 被阅读0次

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>

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

相关文章

网友评论

    本文标题:element-ui date-picker无法通过value绑

    本文链接:https://www.haomeiwen.com/subject/ltmsmktx.html