点击编辑按钮弹窗的日期组件不显示问题

224 阅读1分钟

错误截图

image-20220908102838376.png 原因: 数据格式不对,日期组件要的不是String格式的数据,而是moment格式的数据。

解决方法

一.将String格式的时间用moment转换为相应格式(moment直接下载引入即可使用)

例:

this.formModel = { ...record, dates: moment(record.dates) };

二.将String格式的时间用dayjs转换为相应格式

例:

this.formModel = {
                ...record,
                updateTime: dayjs(record.updateTime),
            };

注意:dayjs还需做一些默认配置。

1.在main.js中导入本地化语言及相关插件

import dayjs from 'dayjs';
import weekday from "dayjs/plugin/weekday"
import localeData from "dayjs/plugin/localeData"
import overrideFormat from "@/plugins/overrideFormat";
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
dayjs.extend(weekday)
dayjs.extend(localeData)
dayjs.extend(overrideFormat());
//overrideForma为封装的默认配置

2.封装好的默认配置

import { PluginFunc } from 'dayjs';

/**
 * @param {string} [defaultFormat] - 默认的格式化格式
 * @return {PluginFunc}
 */
const overrideFormat = (defaultFormat = "YYYY-MM-DD HH:mm:ss") => {
    return (_, dayjsClass) => {
        const _format = dayjsClass.prototype.format;
        dayjsClass.prototype.format = function(args) {
            return _format.bind(this)(args || defaultFormat);
        }
    }
};

export default overrideFormat;