- Common problem
- Manually modify the value of a field
- Batch assignment
- Dynamically modify form rules
- Append form field
- Delete form field
- Hide specified fields
- Generate a form based on the rules returned in the background
- Hide default submit button
- Custom default submit button
- Show default reset button
- Vue version does not support compile
- Obtain $f
- Method of calling an outer component in a configuration item
- Rules are being used in other form-create
- Invalid validation rule
- switch component does not display
- The page is not updated after modifying the component value
Common problem
Manually modify the value of a field
$f.bind()[field] = 'after'
$f.model()[field].value = 'after'
rule[2].value = 'after'
$f.setValue(field,value)
Batch assignment
$f.setValue({[field1]:value1,[field2]:value2})
Dynamically modify form rules
$f.model()[field].props.disabled = false
rule[2].props.disabled = false
Description: Modified attributes need to be predefined in the build rule in advance
Append form field
- Add an image upload component after the
goods_name
field, which is added to the tail by default.$f.append($formCreate.maker.upload(
'产品主图',
'logo',
'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'
).props({
"action": "",
"maxLength": 1,
"multiple": false,
"type": "select",
"uploadType": "image",
"name": "file",
"onSuccess": function (res, file) {
file.url = res.data;
}
})
.validate({required:true, type: 'array', min: 1, message: '请上传1张图片', trigger: 'change'}
),'goods_name');
Add a
input
component before thegoods_name
field, which is added to the header by default.$f.prepend({
type:"input",
title:"商品简介",
field:"goods_info",
value:"",
props: {
"type": "text",
"placeholder": "请输入商品简介",
},
validate:[
{ required: true, message: '请输入商品简介', trigger: 'blur' },
],
},'goods_name');
Append an
input
component to the end of the formrules.push({
type:"input",
title:"商品简介",
field:"goods_info",
value:"",
props: {
"type": "text",
"placeholder": "请输入商品简介",
},
validate:[
{ required: true, message: '请输入商品简介', trigger: 'blur' },
],
})
Delete form field
Delete specified field
$f.removeField(field);
Delete the last field
rules.pop()
Hide specified fields
$f.hidden(true, field)
Generate a form based on the rules returned in the background
fetch('api').then(rule=>{
$f = formCreate.create(rule,{
onSubmit(formData){
// 表单提交事件
$f.btn.loading(true);
//TODO 提交表单
}
})
})
Hide default submit button
Set the global configuration options.submitBtn = false
to hide
Custom default submit button
option: {
submitBtn: {
type: "basic",
size: "mini",
icon: "",
shape: "round",
innerText: "submit",
col: {
span: 4,
offset: 10
}
}
}
Show default reset button
Set the global configuration options.resetBtn = true
to display
Vue version does not support compile
Obtain $f
Method of calling an outer component in a configuration item
Rules are being used in other form-create
A build rule rule
can only be used at the same time in a <form-create>
. If you need to use it multiple times:
- Self-deep copy before use**
- Removed from the used
<form-create>
Invalid validation rule
Note the data type of value. If the component is multi-select or interval select, the data type of value is Array
, you need to set type:'array'
in the validation rule.
switch component does not display
Configure the slot configuration item in props
props: {
"trueValue":"1",
"falseValue":"0",
"slot": {
open:"上架",
close:"下架",
},
}
The page is not updated after modifying the component value
The modification is invalid after the form is created and before it is successfully rendered.
- Modify before generating the form
- Modify in
option.mounted
- Modify after the first form is rendered