源码git仓：

https://gitee.com/weilisky/vue-vant

服务端返回json数据，前端根据json描述动态创建表单。

json描述如下：

{
	"type": "text",
	"key": "pjName",
	"label": "项目名称",
	"class": "",
	"initValFeedType": "",//none,function,request
	"initValFeedTypeText": "",
	"value": "云缴费锁单时间等功能改造",
	"showVal": "",
	"disabled": true,
	"required": false,
	"validate": null,
	"options": {}
}

type ：描述表单的类型 text为普通文本框。 已经实现的表单元素如下：

key ： 表单的id标识

label：表单的label

class：动态绑定的样式

initValFeedType：初始值给定的方式。比如 普通文本“none”，执行函数"function" ,ajax请求"request"。可以根据自己的需求实现更多方式，如与其他字段值联动

initValFeedTypeText：如果initValFeedType执行为none，这里为基本的json字符串，给局需要解析。

value：默认值。当前表单的填值

showVal：展示的值。对于一些组件，展示是一个值，提交是另外一个值，这时值是不同的。如选择组件、checkbox组件等

disabled：是否禁用

required：是否必填

validate：校验函数

options：其他可选项。根据情况使用

 

测试数据：

formEl: [
	{
		category: "基本信息",
		items: [{
			"type": "text",
			"key": "",
			"label": "项目名称",
			"class": "",
			"initValFeedType": "",//none,function,request
			"initValFeedTypeText": "",
			"value": "云缴费锁单时间等功能改造",
			"showVal": "",
			"disabled": true,
			"required": false,
			"validate": null,
			"options": {}
		}, {
			"type": "text",
			"key": "password",
			"label": "需求编号",
			"class": "",
			"initValFeedType": "",//none,function,request
			"initValFeedTypeText": "",
			"value": "AD1224",
			"showVal": "",
			"disabled": true,
			"required": false,
			"validate": null,
			"options": {}
		}, {
			"type": "select", //表单项类型
			"key": "userName",  //表单项的id、name
			"label": "配置库类型", //标签
			"class": "",   //样式
			"initValFeedType": "",//初始值获取方式none无,function 执行js函数,request 使用ajax请求
			"initValFeedTypeText": [{"key": 1, "label": "新建库"}, {"key": 2, "label": "测试库"}], //与initValFeedType配合使用， function时为js脚本，ajax请求时为地址、参数信息
			"value": "",  //表单项的值
			"showVal": "新建配置库",
			"disabled": false,
			"required": true,
			"validate": function (item) {
				alert(item)``
			},
			"options": {}//其他附加项。如添加事件处理等
		}, {
			"type": "person",
			"key": "devManager",
			"label": "开发经理",
			"class": "",
			"initValFeedType": "none",//none,function,request
			"initValFeedTypeText":null,
			"value": "",
			"showVal": "",
			"disabled": true,
			"required": false,
			"validate": null,
			"options": {}
		}, {
			"type": "text",
			"key": "supplyName",
			"label": "供应商名称",
			"class": "",
			"initValFeedType": "",//none,function,request
			"initValFeedTypeText": "",
			"value": "开发管理平台",
			"showVal": "",
			"disabled": false,
			"required": false,
			"validate": null,
			"options": {}
		}, {
			"type": "text",
			"key": "subSysName",
			"label": "子系统名称",
			"class": "",
			"initValFeedType": "",//none,function,request
			"initValFeedTypeText": "",
			"value": "测试软件",
			"showVal": "",
			"disabled": false,
			"required": false,
			"validate": null,
			"options": {}
		}, {
			"type": "datetime",
			"key": "deployDate1",
			"label": "计划上线日期",
			"class": "",
			"initValFeedType": "none",//none,function,request
			"initValFeedTypeText": '',
			"value": "",
			"showVal": "",
			"disabled": false,
			"required": false,
			"validate": null,
			"options": {}
		}, {
			"type": "date",
			"key": "deployDate2",
			"label": "计划上线年月",
			"class": "",
			"initValFeedType": "none",//none,function,request
			"initValFeedTypeText": '',
			"value": "",
			"showVal": "",
			"disabled": false,
			"required": false,
			"validate": null,
			"options": {}
		}, {
			"type": "time",
			"key": "deployDate3",
			"label": "计划上线时间",
			"class": "",
			"initValFeedType": "none",//none,function,request
			"initValFeedTypeText": '',
			"value": "",
			"showVal": "",
			"disabled": false,
			"required": false,
			"validate": null,
			"options": {}
		}, {
			"type": "checkbox",
			"key": "devLan",
			"label": "开发语言",
			"class": "",
			"initValFeedType": "none",//none,function,request
			"initValFeedTypeText": [{"key": 1, "label": "Java"}
				, {"key": 2, "label": "C#"}
				, {"key": 3, "label": "JAVASCRIPT"}, {"key": 4, "label": "C++"}
				, {"key": 5, "label": "DELPHI"}
				, {"key": 6, "label": "SHELL"}, {"key": 7, "label": "RPG"}
				, {"key": 8, "label": "PYTHON"}
				, {"key": 9, "label": "ABAP"}
				, {"key": 10, "label": "COBOL"}],
			"value": [],
			"showVal": "",
			"disabled": false,
			"required": false,
			"validate": null,
			"options": {}
		}, {
			"type": "checkbox",
			"key": "configType",
			"label": "配置项类型 ",
			"class": "",
			"initValFeedType": "none",
			"initValFeedTypeText": [{"key": 1, "label": "代码"}
				, {"key": 2, "label": "文档"}
				, {"key": 3, "label": "脚本"}, {"key": 4, "label": "数据库脚本"}
				, {"key": 5, "label": "配置文件"}
				, {"key": 6, "label": "可执行文件"}, {"key": 7, "label": "目标文件"}
				, {"key": 8, "label": "安装文件"}
				, {"key": 9, "label": "其他"}],
			"value": [],
			"showVal": "",
			"disabled": false,
			"required": false,
			"validate": null,
			"options": {}
		}]
	}, {
		category: "流程信息",
		items: [{
			"type": "text",
			"typeLabel": "",
			"key": "test1",
			"label": "测试",
			"class": "",
			"initValFeedType": "",//none,function,request
			"initValFeedTypeText": "",
			"value": "",
			"showVal": "",
			"disabled": false,
			"required": false,
			"validate": null,
			"options": {}
		}, {
			"type": "text",
			"key": "test2",
			"label": "测试",
			"class": "",
			"initValFeedType": "",//none,function,request
			"initValFeedTypeText": "",
			"value": "",
			"showVal": "",
			"disabled": false,
			"required": false,
			"validate": null,
			"options": {}
		}, {
			"type": "text",
			"key": "test3",
			"label": "测试",
			"class": "",
			"initValFeedType": "",//none,function,request
			"initValFeedTypeText": "",
			"value": "",
			"showVal": "",
			"disabled": false,
			"required": false,
			"validate": null,
			"options": {}
		}]
	}
]

效果：