Vue+ElementUI实现表单动态渲染、校验(一)
项目需求
接到新的项目需求,需要把一个json文件动态渲染成表单,并添加各种校验规则等。经过各种查资料,最终完成了此功能开发,对这块的知识点进行梳理如下。
1.vue表单实现递归渲染
我们需要实现的Json文件格式如下:
// An highlighted block
"configs": [
{
"name": "school1",
"cnName": "学校一",
"childNodes": [
{
"name": "grade1",
"cnName": "一年级",
"props": [
{
"name": "class1",
"cnName": "一班",
"dataType": "int",
"desc": "班级人数",
"validator": {
"min": 20,
"max": 50,
"required": true
}
},
{
"name": "class2",
"cnName": "二班",
"dataType": "int",
"desc": "班级人数",
"validator": {
"min": 20,
"max": 50,
"required": true
}
},
{
"name": "class3",
"cnName": "三班",
"dataType": "int",
"desc": "班级人数",
"validator": {
"min": 20,
"max": 50,
"required": true
}
}