antdesignvue时间组件renderExtraFooter页脚无法关闭日期面板—

本文链接：https://blog.youkuaiyun.com/weixin_42566993/article/details/129482476

在使用AntdVue的时间选择器组件并设置自定义页脚后，遇到无法关闭面板的问题。解决方案是通过监听`form.date1`的值变化，当有值时关闭日期面板并重新进行表单校验。代码示例展示了如何处理`openChange`事件和设置`datePickerShow`状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

使用antdesignvue时间组件设置自定义页脚后发现无法关闭面板。如图所示：
在这里插入图片描述

解决：如下代码

<template>
  <a-form-model
    ref="ruleForm"
    :model="form"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-model-item label="Activity time" required prop="date1">
      <a-date-picker
        v-model="form.date1"
        type="date"
        placeholder="Pick a date"
        valueFormat="YYYY-MM-DD"
        :showToday="false"
        :open="datePickerShow"
        @openChange="handleDateOpenChange"
      >
        <div slot="renderExtraFooter">
          <a @click.prevent="getPermanentTime">永久有效期</a>
        </div>
      </a-date-picker>
    </a-form-model-item>
    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">
        Create
      </a-button>
      <a-button style="margin-left: 10px;" @click="resetForm">
        Reset
      </a-button>
      <a-button style="margin-left: 10px;" @click="getPermanentTime">
        永久有效期
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: '',
      form: {
        date1: undefined,
      },
      rules: {
        date1: [{ required: true, message: 'Please pick a date', trigger: 'change' }],
      },
      datePickerShow: false
    };
  },
  watch: {
    'form.date1'(val) {
      if (val) {
        this.datePickerShow = false // 当其有值时动态关闭日期面板
        this.$refs.ruleForm.validateField('date1') // 同时重新进行表单校验
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log(this.form.date1,'===');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    getPermanentTime() {
      this.form.date1 = '2099-12-31'
    },
    handleDateOpenChange(status) {
      this.datePickerShow = status
    }
  },
};
</script>