vue form
1.0.0
フォームはバックグラウンドの戻りフィールドに基づいて自動的に生成され、フォームの内容は要素 UI に依存し、フォーム検証をサポートし、mockjs シミュレーションをサポートします。
< template >
< my - item
v - for = "(item,index) in formItemList"
: key = "item.name"
: item = "item"
v - model = "editForm[item.name]" >
</ my - item >
</ template >
< script type = "text/babel" >
data : function () {
return {
editForm : {}, //动态渲染表单
formItemList : [
{
"xtype" : "textField" ,
"text" : "文本" ,
"name" : "name" ,
"value" : "名字1" ,
"disabled" : false ,
"placeholder" : "请输入一些文本" ,
"required" : false ,
},
{
"xtype" : "selectField" ,
"text" : "账号" ,
"name" : "satus" ,
"value" : "B" ,
"disabled" : false ,
"placeholder" : "请输入一些文本" ,
"required" : true ,
"access" : "local" ,
"data" :[
{
"label" : '选项一' ,
"value" : "A" ,
},
{
"label" : '选项二' ,
"value" : "B" ,
},
{
"label" : '选项三' ,
"value" : "C" ,
},
],
},
{
"xtype" : "checkField" ,
"text" : "多选框" ,
"name" : "check" ,
"value" : [ "C" ],
"disabled" : false ,
"placeholder" : "请输入一些文本" ,
"required" : true ,
"data" :[
{
"label" : '选项一' ,
"value" : "A" ,
},
{
"label" : '选项二' ,
"value" : "B" ,
},
{
"label" : '选项三' ,
"value" : "C" ,
},
],
},
{
"xtype" : "textField" ,
"text" : "文本什么的" ,
"name" : "password" ,
"value" : "123456" ,
"disabled" : false ,
"placeholder" : "请输入一些文本" ,
"required" : true ,
},
{
"xtype" : "fileField" ,
"text" : "图片" ,
"name" : "pic" ,
"value" : "http://192.168.4.124:930/news/201801/5a687461aeccc.png?width=628&height=906" ,
"disabled" : false ,
"placeholder" : "请上传图片" ,
"required" : true ,
},
{
"xtype" : "dateField" ,
"text" : "开始日期" ,
"name" : "time" ,
"value" : "" ,
"disabled" : false ,
"placeholder" : "请选择日期" ,
"required" : true ,
},
{
"xtype" : "htmlEditorField" ,
"text" : "這是富文本" ,
"name" : "ueditortext" ,
"value" : "<p>這是段落</p><a href=''>這是超鏈接</a>" ,
"disabled" : false ,
"placeholder" : "请输入一些文本內容" ,
"required" : true ,
},
], //编辑和添加表单
}
},
</ script >
