ant design vue

[uniquejava]

全量导入

组件数轻松上20， 我已经没有耐心使用按需导入了。

暴力 import Antd from "ant-design-vue" 提示Antd找不到~， 解决办法： 把babel.config.js中的下面这段删除,

 plugins: [
 [
 "import",
 {
 libraryName: "ant-design-vue",
 libraryDirectory: "es",
 style: true,
 },
 ],
 ],

然后~~

import Vue from "vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.less";

Vue.prototype.$message = Antd.message;
Vue.prototype.ok = function(message) {
 this.$message.success(message || "Success.");
};

Vue.use(Antd);

table 中的boolean字段不能显示值

弄个customRender.

<template>
 <a-table
 :columns="mycolumns"
 :dataSource="tasks"
 :pagination="false"
 rowKey="id"
 size="small"
 >
 <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
 <template slot="auto" slot-scope="text">{{ text.toString() }}</template>
</template>
<script>
export default {
data: {
 mycolumns: [
 {
 title: "#",
 dataIndex: "index",
 scopedSlots: { customRender: "index" },
 align: "center",
 width: "5%",
 },
 {
 title: "Auto",
 dataIndex: "auto",
 scopedSlots: { customRender: "auto" },
 },
 ]
}

checkbox 设置初值 要 指定 valuePropName 为 checked

<a-row>
 <a-col :span="12">
 <a-form-item v-bind="formItemLayout" label="Active" :colon="false">
 <a-checkbox
 v-decorator="[
 'active',
 { valuePropName: 'checked', initialValue: formData.active },
 ]"
 @change="checkActive($event.target.checked)"
 >&nbsp;</a-checkbox
 >
 </a-form-item>
 </a-col>
</a-row>

You cannot set a form field before rendering a field associated with the value.

出现这个错误的原因:

1. 没写 <a-form-item> 标签！
2. fieldName写错了 this.form.setFieldsValue({ fieldName1: 0, fieldName2: [1, 2] });

[uniquejava]

Form

10分钟精通Ant Design Form表单

期望在form中的data通过validation后才同步到其他组件进行展示。

不是
form = data (多个form共享） + rule？
或 form = clonedData + rule？

而是
form = initialData + rule,
data = form.getFieldsValue()

Steps

1. data: this.form = this.$form.createForm(this)
2. <a-form :form="form"> <a-form-item> <a-select v-decorator=["fieldName", {initialValue:0, rules: [{required:true, message: "hi"}]}] (注意a-form-item不能少）
3. this.form.validateFields((err, values)=> if(!err) print(values););

form表单的使用

form表单之获取表单的数据

原文链接：https://blog.csdn.net/weixin_44051815/java/article/details/88305722

创建表单
通过ant-design-vue去获取表单的数据是使用v-decorator的方式去给每个项去注册，这样才能通过组件去拉取表单的数据，同时对必填项做校验；

<template>
 <a-form @submit="handleOk" :form="form">
 // :form="form" 必须优先注册
 <!-- 客户姓名 -->
 <a-form-item
 :labelCol="labelCol" // 排列样式
 :wrapperCol="wrapperCol"
 label='客户姓名：'
 >
 <a-input
 v-decorator="[
 'name', // 给表单赋值或拉取表单时，该input对应的key
 {rules: [{ required: true, message: '请输入客户名称!' }]}
 ]"
 placeholder="请输入客户名称"/>
 </a-form-item>
 </a-form>
</template>

export default {
 data() {
 return {
 form: this.$form.createForm(this), // 只有这样注册后，才能通过表单拉取数据
 }
 }
}

拉取表单数据的方法
通过validateFields的方法，能够校验必填项是否有值，若无，则页面会给出警告！

this.form.validateFields((err, values) => {
 if (err) {
 // 这里做逻辑处理
 console.log(values) // { name: '' }
 }
}

清空表单的方法
执行this.form.resetFields()，则会将表单清空。

给表单赋值
值得一提的是，setFieldsValue只有通过这种方式给表单赋值，拉取表单的时候才能拉取到值，其他设置默认值的方式，拉取表单时都无法获取到默认值。

this.form.setFieldsValue({
 name: '设置值'
 })

给表单中添加自定义校验
现在给表单添加自定义校验的方式，是从你开始输入时就在校验，讨厌的警告一直存在，直到你输入完整才会消失，个人觉得这种方式不太友好！

<a-form-item
 v-bind="formItemLayout"
 label="E-mail"
>
 <a-input
 v-decorator="[
 'email',
 {
 rules: [{
 type: 'email', message: 'The input is not valid E-mail!',
 }, {
 required: true, message: 'Please input your E-mail!',
 }]
 }
 ]"
 />
</a-form-item>

推荐使用下面的方式做自定义校验，当输入框失去焦点后再去校验是否正确
这种方法的思路是，
当输入框失去焦点时，校验是否为空同时是否匹配正则
给该单个输入框设置错误信息，并在页面给出警告。

<a-form-item
 :labelCol="labelCol"
 :wrapperCol="wrapperCol"
 label='手机：'
>
<a-input
 type="number"
 v-decorator="[
 'phone',
 {
 rules: [
 { required: false, message: '请输入手机号码!' },]
 },
 ]"
 @blur="validatePhoneBlur"
 placeholder='请输入手机号码' />
</a-form-item>

// 校验事件
validatePhoneBlur(e) {
 const validatePhoneReg = /^1\d{10}$/
 if (e.target.value && !validatePhoneReg.test(e.target.value)) {
 const arr = [{
 message: '您输入的手机格式不正确!',
 field: 'phone',
 }]
 this.form.setFields({ phone: { value: e.target.value, errors: arr } })
 }
},

[uniquejava]

moment

import moment from "moment";
import "moment/locale/ja"; // without this line it didn't work
moment.locale("ja");

<a-time-picker
 style="margin-left: 10px;"
 v-decorator="[
 'startTime',
 { initialValue: moment('08:00', 'HH:mm') },
 ]"
 format="HH:mm"
/>

<script>
import moment from "moment";
export default {
 methods: {
 moment,

moment取值

由于用ant design日期组件取得的值是moment类型，而往数据库中保存需要的是字符串类型
this.getFieldsValue()。取到的对应time字段。要从moment类型转成string。。

fieldXyz = fieldXyz.format("HH:mm:ss")