动态表单功能

1. 调用接口获取json数据，为了方便演示，这里使用本地json；

“label”用于判断什么组件，“type”用于判断组件类型，“name”组件name属性，“title”字段名，“placeholder”默认提示信息，“maxLength”输入最长长度，“required”是否必填，“requiredMessage”必填提示信息，“ruleType”校验规则的类型，“checkRule”校验规则的长度，“ruleMessage”校验规则的提示信息，“option”选择项内容，“mode”选择的类型（单选、多列、日期等），“checked”是否选中等；可根据实际情况需要，和组件的属性来对接口返回字段增改删；

// 动态表单数据
module.exports = {
"errcode": 0,
"data": [{
"sort": 1,
"label": "input",
"type": "text",
"name": "sqrxm",
"title": "申请单位名称",
"placeholder": "请填写申请单位名称",
"maxLength": 20,
"required": true,
"requiredMessage": "请填写申请单位名称",
"ruleType": "string",
"checkRule": "1,50",
"ruleMessage": "申请单位名称必须为1-50个字符！"
},
{
"sort": 2,
"label": "input",
"type": "text",
"name": "sqrdz",
"title": "申请单位地址",
"placeholder": "请填写申请单位地址",
"maxLength": 20,
"required": true,
"requiredMessage": "请填写申请单位地址",
"ruleType": "string",
"checkRule": "1,50",
"ruleMessage": "申请单位地址必须为1-50个字符！"
},
{
"sort": 3,
"label": "select",
"type": "",
"name": "township",
"title": "所属镇区",
"required": false,
"ruleType": "notcheck",
"checkRule": "",
"ruleMessage": "不需要",
"option": [‘请选择‘, ‘东区‘, ‘石岐区‘, ‘古镇‘, ‘五桂山‘, ‘其他‘],
"mode": "selector",
"index": 0
},
{
"sort": 4,
"label": "select",
"type": "",
"name": "sqrzjlx",
"title": "申请单位证件类型",
"placeholder": "请选择申请单位证件类型",
"required": true,
"requiredMessage": "请选择申请单位证件类型",
"ruleType": "notnull",
"checkRule": "",
"ruleMessage": "请选择申请单位证件类型",
"option": [‘请选择‘, ‘统一社会信用代码‘, ‘工商营业执照‘, ‘组织机构代码‘, ‘登记证‘, ‘其他‘],
"mode": "selector",
"index": 0
},
{
"sort": 5,
"label": "select",
"type": "",
"name": "dlxzq",
"title": "多列选择器",
"placeholder": "",
"required": true,
"requiredMessage": "",
"ruleType": "notnull",
"checkRule": "",
"ruleMessage": "请选择城市",
"option": [
[‘中国‘, ‘伊朗‘],
[‘广东省‘, ‘山东省‘],
[‘中山市‘, ‘北京‘, ‘上海‘, ‘广州‘]
],
"mode": "multiSelector",
"multiIndex": [0, 0, 0]
},
{
"sort": 6,
"label": "select",
"type": "",
"name": "rqxzq",
"title": "日期选择器",
"placeholder": "",
"required": true,
"requiredMessage": "",
"ruleType": "notnull",
"checkRule": "",
"ruleMessage": "请选择日期",
"option": null,
"mode": "date",
"index": 0
},
{
"sort": 7,
"label": "radio",
"type": "",
"name": "radio",
"title": "单选框",
"placeholder": "",
"required": false,
"ruleType": "notcheck",
"checkRule": "",
"ruleMessage": "不需要",
"option": [{
"value": "radio1",
"text": "选项1"
},
{
"value": "radio2",
"text": "选项2"
}
]
},
{
"sort": 8,
"label": "checkbox",
"type": "",
"name": "checkbox",
"title": "复选框",
"placeholder": "",
"required": false,
"ruleType": "notcheck",
"checkRule": "",
"ruleMessage": "不需要",
"option": [{
"value": "checkbox1",
"text": "选项1"
},
{
"value": "checkbox2",
"text": "选项2"
},
{
"value": "checkbox3",
"text": "选项3"
}
]
},
{
"sort": 9,
"label": "switch",
"type": "",
"name": "switch",
"title": "开关选择器",
"placeholder": "",
"maxLength": 0,
"required": false,
"ruleType": "notcheck",
"checkRule": "",
"ruleMessage": "不需要",
"checked": "checked"
},
{
"sort": 10,
"label": "slider",
"type": "",
"name": "slider",
"title": "滑动选择器",
"placeholder": "",
"maxLength": 0,
"required": false,
"ruleType": "notcheck",
"checkRule": "",
"ruleMessage": "不需要",
"option": {
"min": 5,
"max": 100,
"step": 5,
"value": 50
}
},
{
"sort": 11,
"label": "textarea",
"type": "",
"name": "sqsy",
"title": "申请事由",
"placeholder": "请填写申请事由",
"maxLength": 2000,
"required": false,
"ruleType": "notcheck",
"checkRule": "",
"ruleMessage": "不需要"
}
]
}

2. 循环json数据（v-for="(item, index) in portData"），根据每一项内容判断显示的组件和组件属性，为了便于扩充，建议把所有表单常用的组件都进行判断；以后无论什么组件，直接获取接口渲染；

下面实现了组件“input”、“select”（多种）、“radio”、“checkbox”、“switch”、“slider”、“textarea”；