Javascript json动态生成表单
Javascript json动态生成表单
kingrome2009
于 2018-10-09 15:38:52 发布
4031
收藏 6
分类专栏： vuejs2.0 文章标签： iview
版权
vuejs2.0
专栏收录该内容
27 篇文章0 订阅
订阅专栏
JSON.stringify(mock,null,4).toString()格式化json格式在页面输出，这个form-create是一个开源框架
/*! form-create v1.3 | github https://github.com/xaboy/form-create | author xaboy */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form-create-preview示例</title>
<link href="../../../static/iview/styles/iview.css" rel="stylesheet">
<script src="../../../static/vue/vue.min.js"></script>
<script src="../../../static/iview/iview.min.js"></script>
<!--省市区三级联动json数据-->
<script src="./form-create.min.js"></script>
<style>
.container{
width: 1300px;
overflow: hidden;
margin: 0 auto;
}
.jsonBox,.formCreate{
overflow: auto;
width:100%;
resize: none;
margin-top: 20px;
height:600px;
border:1px solid #666;
}
.fl{
float: left;
}
.fr{
float: right;
}
button{
width: 100%;
height: 40px;
line-height: 40px;
border:none;
font-size: 16px;
outline:none;
color: #fff;
cursor: pointer;
background:#2d8cf0;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="fl" style="width:50%">
<textarea class="jsonBox" id="jsonBox" v-model="model"></textarea>
</div>
<div class="formCreate fr" id="formCreate" style="width:50%"></div>
<button @click="markHtml">生成html</button>
</div>
</div>
<script>
// 定义模板
let mock = [
{
type:"input",
title:"商品名称",//label名称
field:"goods_name1",//字段名称
props: {
"type": "text", //输入框类型，可选值为 text、password、textarea、url、email、date
"clearable":false, //是否显示清空按钮
"disabled": false, //设置输入框为禁用状态
"readonly": false, //设置输入框为只读
"rows": 4, //文本域默认行数，仅在 textarea 类型下有效
"autosize": false, //自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }
"number": false, //将用户的输入转换为 Number 类型
"autofocus": false, //自动获取焦点
"autocomplete": "off", //原生的自动完成功能，可选值为 off 和 on
"placeholder": "请输入商品名称", //占位文本
"size": "default", //输入框尺寸，可选值为large、small、default或者不设置,
"spellcheck": false, //原生的 spellcheck 属性
"required":false,
}
},
{
type:"input",
title:"商品名称",//label名称
field:"goods_name2",//字段名称
props: {
"type": "text", //输入框类型，可选值为 text、password、textarea、url、email、date
"clearable":false, //是否显示清空按钮
"disabled": false, //设置输入框为禁用状态
"readonly": false, //设置输入框为只读
"rows": 4, //文本域默认行数，仅在 textarea 类型下有效
"autosize": false, //自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }
"number": false, //将用户的输入转换为 Number 类型
"autofocus": false, //自动获取焦点
"autocomplete": "off", //原生的自动完成功能，可选值为 off 和 on
"placeholder": "请输入商品名称", //占位文本
"size": "default", //输入框尺寸，可选值为large、small、default或者不设置,
"spellcheck": false, //原生的 spellcheck 属性
"required":false,
}
}
];
//定义模板数据
let mockData = [
{
field:'goods_name1',
newField:'goods_name01',
value:'商品01'
},
{
field:'goods_name2',
newField:'goods_name02',
value:'商品02'
},
{
field:'goods_name3',
newField:'goods_name03',
value:'商品03'
}
]
vm = new Vue({
el:'#app',
cus:'foo',
data:{
model:JSON.stringify(mock,null,4).toString()
},
methods:{
markHtml(){
this.model = this.model?this.model:this.mocks;
if(!this.model){
return alert('请输入要生成的json数据')
}
model = JSON.parse(this.model);
window.formData = {};
let root = document.getElementById('formCreate');
$f = this.$formCreate(model,{
el:root,
submitBtn:false
});
$f.model(formData);
console.log(formData,'formData')
mock.forEach(items=>{
mockData.forEach(item=>{
if(items.field==item.field){
console.log(item)
$f.set(formData[item.field],'value',item.value);
}
})
})
},
}
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
因为项目是基于iview的ui框架，可能应用场景会受限，因为现在都流行elementui，但细心的你会发现iview的视觉效果更舒服更协调，用到后台系统是不错的选择，实现可视化界面
————————————————
版权声明：本文为CSDN博主「kingrome2009」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kingrome2017/article/details/82983328