问题:

        v-model回显失效,使用el-date-picker组件选择日期后,无法在输入框内回显,检查发现绑定的值确实正确、格式也没有问题,但没有回显内容

        官方文档说明的change事件就是不触发

        有clearable属性控制清空选择内容,但是没有对应的clear事件

解决:

        使用v-bind:value回显,手写事件改变选择日期后对应的值(需要预先声明日期范围对应的属性为数组,对应位置上的值为空串,在事件中使用$set更改

        change事件需要改用input事件

        clear对应也是触发input事件,值为空

template:

<el-date-picker
    :value="filterInsertShow"
    type="daterange"
    unlink-panels
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
    clearable
    value-format="yyyy-MM-dd"
    format="yyyy-MM-dd"
    @input="changeInsertShow"
>
</el-date-picker>

script:

data() {
    return {
      //注册日期
      filterInsertShow: ['', ''], 
 
      //快捷日期选中
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
    };
  },
methods:{
    changeInsertShow(value) {
      if (value) {
        //设置
        this.$set(this.filterInsertShow, 0, value[0]); //数组的索引响应式需要使用 $set
        this.$set(this.filterInsertShow, 1, value[1]);
      } else {
        //清空
        this.$set(this.filterInsertShow, 0, '');
        this.$set(this.filterInsertShow, 1, '');
      }
    },
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐