之前一直习惯于用element ui,用了antd ui框架后觉得在使用的时候着实没有element ui好用,记录下用antd表单时遇到的问题
接下来,熟悉下它的写法
1、data中表单的创建方式写法,是下面这种方式
data() {
return {
form: this.$form.createForm(this), //antd创建表单
}
}
2、同时页面结构绑定的写法与element ui也不一样,这里需要注意的是他的绑定方式,element ui用的是v-model绑定表单值的写法,它的写法是v-decorator,而add.loginname是绑定在另一个文件的校验名称,同时也是绑定的他的值,这里的名称建议与要传递给后台接口文档的名称保持一致比较好
<a-form class="has-pd20" :form="form" @submit="handle">
<a-row :gutter="8">
<a-col :span="24">
<a-form-item
label="账号"
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol">
<a-input
@blur="accountBlur(2)"
v-decorator="add.loginName"
placeholder="请输入账号"/>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item
label="密码"
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol">
<a-input-password
v-decorator="add.password"
placeholder="请输入密码">
</a-input-password>
</a-form-item>
</a-col>
</a-row>
</a-form>
3、在当前文件中引入了校验方式
import validate from './validate'
import rules from '@/common/utils/rules'
let validate = {
// 新增业字段
add: {
loginName: [
'loginName',
{
rules: [
{
required: true,
message: '请输入账号'
},
{
pattern: /^[\u4E00-\u9FA5\uF900-\uFA2D\w]{1,50}$/,
message: '请输入1-50个字符,推荐使用汉字、数字、大小写字母'
}
]
}
]
}
}
// 遍历所有的检验字段,检查每个字段的option,为每个option添加公用的规则
for (let key in validate) {
for (let k in validate[key]) {
validate[key][k][1] = rules.addNormalize(validate[key][k][1])
}
}
export default {
data() {
return validate
}
}
4、提交表单需要将form对象传递给后台,有时候是接口文档是需要再加一些其他的参数,不仅仅是光model绑定的字段
比如我这里form表单里绑定了loginName和password,传递给后台的时候需要再加一个参数roleType,这里用到
了getFieldDecorator这个API,给表单插入一个属性,然后为这个属性设置值用到了setFieldsValue这个Api,
再
<a-button type="primary" @click="handle">提交</a-button>
<script>
handle(e) {
e && e.preventDefault()
// ---------------------给表单中插入一个属性
this.form.getFieldDecorator('roleType', { roleType: null })
//------------------ 给表单中的属性,设置属性值
this.form.setFieldsValue({
roleType: 2
})
this.form.validateFields((err, values) => {
//------------这个values就可以看到自己要传递的表单对象,包含了3个值也就是下面的这个对象了
// form{
// loginName:'XXX',
// password:'XXX',
// roleType:2
// }
console.log(values)
if (!err) {
values.password = this.$encryption.Encrypt(values.password)
this.$axios.post('/partner/register', values).then((res) => {
if (res.flag) {
this.$message.success('注册成功')
this.gologin('2')
} else {
this.$message.warning(res.errMsg)
}
})
}
})
},
</script>
以往用element ui的表单,需要给表单增加值、改值或取值,都是用this.form.XXX就可以取他某个值,很方便,但antd如果需要打印某个值,则需要用到他的getFieldsValue 这个Api
this.form.getFieldsValue().loginName
antd比起elementui确实不是非常的灵活,更适合react的项目,我也在努力学着怎么使用它!