Ant Design Vue中DatePicker 日期选择框遇到的回显问题

Ant Design Vue中DatePicker 日期选择框遇到的回显问题

• 使用DatePicker时正常取到选择的时间数据是正常的，但是回显时直接将从后端获取的时间传给该组件，时间能显示但是报错，或者直接不显示。

• 正常获取时间数据：
  这个是使用了validateFields，所以数据直接获取，具体参考官方文档form表单
  
• 回显时一开始我是直接赋值，报错

   getListById() {
            seeBusinessDistrict(this.$route.query.id)
                .then((res) => {
                    this.$message.success("活动获取成功");
                    console.log(res);
                    // 给表单设置值（回显）
                    res.data.areaId = res.data.areaId.split(",");
                    const { setFieldsValue } = this.form;
                    setFieldsValue({
                        title: res.data.title,
                        applyEndTime: res.data.applyEndTime,//这里是直接赋值的时间
                        brief: res.data.brief,
                        areaId: res.data.areaId,
                        address: res.data.address,
                        num: res.data.num,
                    });

                    this.banner = res.data.banner;
                })
                .catch((err) => {
                    this.$message.success("活动获取失败");

                    console.log(err);
                });
        },

• 解决方法：
  
  datepicker里面选中的时间默认是moment对象，所以要想将时间字符串回显在选择框中，必须先将applyEndTime里面的"2021-04-13 23:34:48"转换成moment形式。
  1.安装moment.js

npm install moment --save

2.引入

import moment from “moment”;

3.使用，拿到处理好的数据直接赋值就解决了

var day = moment(res.data.applyEndTime); //时间回显需要创建moment对象