Ant Design Vue中DatePicker 日期选择框遇到的回显问题
Ant Design Vue中DatePicker 日期选择框遇到的回显问题使用DatePicker时正常取到选择的时间数据是正常的,但是回显时直接将从后端获取的时间传给该组件,时间能显示但是报错,或者直接不显示。正常获取时间数据:这个是使用了validateFields,所以数据直接获取,具体参考官方文档form表单回显时一开始我是直接赋值,报错getListById() {seeBusines
·
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对象
更多推荐
已为社区贡献2条内容
所有评论(0)