1、ant-design-vue3.x中文配置
默认情况下ant-design-vue3.x时英文文案，而我们经常需要使用中文文案。在App.vue中添加中文相关全局配置，代码如下所示：
<script setup>
import {ref} from 'vue';
import layout from "./views/Layout.vue";
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs'; //日期时间组件API
import 'dayjs/locale/zh-cn'; //
dayjs.locale('zh-cn'); //日期时间组件中文
const pageMaskShow = ref(false);
const locale = ref(zhCN); //中文
</script>
<template>
<a-config-provider :locale="locale"> <!-- 全局配置，中文 -->
<a-spin size="large" :spinning="pageMaskShow" tip="处理中，请稍后...">
<layout></layout>
</a-spin>
</a-config-provider>
</template>
<style scoped>
.ant-spin-nested-loading {
height: 100%;
}
:deep(.ant-spin-container) {
height: 100%;
}
</style>
2、Form示例
关键代码在在文件注释中说明：
<script setup name="Welcome">
import dayjs from 'dayjs'; //日期时间API
import {reactive} from "vue";
import axios from 'axios'; //ajax相关API
//创建与form绑定的数据对象
const formState = reactive({
username: '',
password: '',
remember: true,
nowTime: dayjs('2022-07-28 13:01:01', 'YYYY-MM-DD HH:mm:ss') //为date picker组件赋初值
});
//表单提交时完成表单数据验证且成功时调用的函数
const onFinish = values => {
//日期时间字段提交前，需要将数据转化为后端服务要求的字符串类型的格式化数据后再提交
values.nowTime = values.nowTime.format("YYYY-MM-DD HH:mm:ss");
axios.post("/api/hellodemo/sayHello.do", values).then(resp => {
console.log("ajax success", resp);
}).catch(err => {
console.log("ajax error", err);
});
console.log('Success:', values);
};
//表单提交时完成表单数据验证且失败时调用的函数
const onFinishFailed = errorInfo => {
console.log('Failed:', errorInfo);
};
</script>
<template>
<div>
<h1>系统首页</h1>
<hr>
<a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 8 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
<a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名！' }]">
<a-input v-model:value="formState.username" /> <!-- v-model:value，与数据对象的username属性绑定 -->
</a-form-item>
<a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入用户名！' }]">
<a-input-password v-model:value="formState.password" />
</a-form-item>
<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 8 }">
<a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
</a-form-item>
<a-form-item label="登录时间" name="nowTime" :rules="[{ required: true, message: '请选择登录时间！' }]">
<a-date-picker show-time v-model:value="formState.nowTime" />
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button type="primary" html-type="submit">提交</a-button>
</a-form-item>
</a-form>
</div>
</template>
<style scoped>
h1 {
text-align: center;
color: red;
}
.ant-picker {
width: 100%;
}
</style>
``
请忽略这里的登录时间字段的业务含义，本例的意图是想说明两个问题：
1、如何给date picker组件赋初值；
2、提交表单数据前，需要将提交数据对象的日期时间类型数据转换为后端服务要求的格式化数据后提交。