2.1 获取v-decorator的值
methods: {
changeMe(selectedValue) {
//selectedValue就是当前触发字段的值，也可以用下getFieldValue获取，但是有些组件好像获取在赋值前，可能需要加延迟 this.form.getFieldValue('name') } }
2.2 设置v-decorator的值
methods: {
changeMe(selectedValue) {
this.form.setFieldsValue({ name: "值",// id: res.result.id,//最后一个逗号随意 }); } }
2.3 v-decorator在form表单的验证：
部分前端代码
......
<a-form-item label="名字" :labelCol="XTwoLabelCol" :wrapperCol="XTwoWrapperCol" class="x-form-item">
<a-input v-decorator="['name', validatorRules.name]" placeholder="请输入"></a-input>
</a-form-item>
<a-form-item label="数字" :labelCol="XTwoLabelCol" :wrapperCol="XTwoWrapperCol" class="x-form-item">
<a-input v-decorator="['number', validatorRules.number]" placeholder="请输入"></a-input>
</a-form-item>
......
验证：
data() {
return { form: this.$form.createForm(this), validatorRules: { name: {//name与v-decorator中属性对应 initialValue: "水",//初始化值，也就是默认值 rules: [ { required: true, message: '请输入检验日期!'},//此处开启校验必填 {validator: (rule, value, callback) => validateDuplicateValue('em_project_info', 'project_name', value, this.model.id, callback)},//此处开启唯一验证， { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!'},//此处配置正则表达式，手机号，可自己配置正则表达式 ] }, number: {//name与v-decorator中属性对应 rules: [ { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!'},//此处配置正则表达式，手机号，可自己配置正则表达式 ] }, }, } }
校验配置：
默认时间：
initialValue: moment(new Date()).format("YYYY-MM-DD"),//，此处一定要导入import moment from "moment";
必填：
rules: [
{ required: true, message: '请输入检验日期!'} ]
校验唯一值：
rules: [
{validator: (rule, value, callback) => validateDuplicateValue('表名', '验证唯一值的字段', value, this.model.id, callback)}, ]
正则表达式验证：
rules: [
{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!'},//pattern为正则表达式，message为提示信息，正则表达式可以根据自己需求来设置。此处注意在/正则表达式/。在俩斜杠之间位正则表达式。 ]
2.4 JEditableTable的验证：
部分代码：此处包含唯一验证，必填验证，正则表达式验证
columns: [
{
title:'名称', align:"center",//居中显示 width: '280px',//宽度 ellipsis: true, key: 'name',//字段名 type: FormTypes.input,//表示以input标签显示 placeholder: '请输入${title}',//提示信息 validateRules: [ { required: true,//在前端设置此字段必填 message: '${title}不能为空',//在前端设置此字段不能为null，提示文本 // 自定义函数校验 handler,表单验证，此处为唯一性验证 handler(type, value, row, column, callback, target) { //验证sampleName不能重复 let { values } = target.getValuesSync({ validate: false }) let count = 0 for (let val of values) { if (val['name'] === value) {//什么字段就传什么参数， if (++count >= 2) { callback(false, '${title}不能重复') return } } } callback(true) // true = 通过验证 } } ], }, { title:'数量', align:"center", //dataIndex: 'number' width: '140px', ellipsis: true, key: 'number', type: FormTypes.input, placeholder: '请输入${title}', validateRules: [ { pattern: /^[1-9]\d*$/, message: '请输入正整数!'},//正则表达式验证，正整数 ] }, }
2.5 v-decorator的其他知识点
去空字符串
v-decorator.trim="[ 'dictCode', validatorRules.dictCode]"//v-decorator.trim为去空操作
rules:[{validator:(rule,value,callback)=>validateDuplicateValue('表名','验证唯一值的字段',value,this.model.id,callback)},]