本文实例为大家分享了vue+element实现动态加载表单的具体代码，供大家参考，具体内容如下
一、问卷动态加载表单
|
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
|
//html<el-form :model="quesPaper" status-icon label-width="100px" label-position="top" size="small" v-loading="paperLoading" > <el-form-item v-for="n in paperForm.answerList" :label="n.questionRepository.question" :key="n.key" > <!-- 单选 --> <el-radio-group v-model="n.optionId" v-if="n.questionRepository.type === 1"> <el-radio v-for="(i, idx) in n.questionOption" :label="i.id" :key="idx" class="mb5">{{ i.questionOption }}</el-radio> </el-radio-group> <!-- 多选 --> <el-checkbox-group v-model="n.optionId" v-if="n.questionRepository.type === 2"> <el-checkbox v-for="(i, idx) in n.questionOption" :label="i.id" :key="idx">{{ i.questionOption }}</el-checkbox> </el-checkbox-group> <!-- 填空 --> <el-input type="textarea" style="width: 600px" class="fl" v-model="n.answer" v-if="n.questionRepository.type === 3" :rows="4" placeholder="请输入内容" ></el-input> </el-form-item> <el-row class="mt20" type="flex" justify="start"> <el-col :span="5"> <el-button type="primary" size="small" @click.stop="saveStageAnswer">保存问卷</el-button> </el-col> </el-row></el-form>//data数据paperForm: { // 问卷表单 answerList:[{ questionRepository:'', questionOption:[], questionId: '', optionId:'', answer: '' }] },//接口getPaperByDrugStatus(drugStatus, id){ // 根据用药状态获取问卷 this.paperLoading = true this.$axios.get(this.$api + 'xxx/xxx?paperId='+this.selectStage.paperId + '&drugStatus=' + drugStatus).then(res => { if(res.data.code === 200){ let answerArr = [] let questionArr = [] res.data.data.questionToList.map((item)=>{ item.optionList.map((n)=>{ questionArr.push({ id:n.id, questionOption:n.questionOption }) }) answerArr.push({ questionOption:questionArr, questionRepository:item.questionRepository, questionId:item.questionRepository.id, optionId:item.questionRepository.type === 2?[]:'', answer: '' }) }) console.log(answerArr) this.paperForm = { // 问卷表单 answerList:answerArr } setTimeout(() => { this.paperLoading = false }, 300) } })}, |
二、批量数据动态加载表单
特点：
1.每一行的输入框，根据后台返回值，动态生成，数量可增可减。
2.行数根据自己设置的值 5 ，自动循环生成。
3.验证需要:prop和:rules，如果不验证，就删了
|
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
|
<template><!-- 录入数据 --> <div class="DialyInputDetail" > <div class="fw fz16 color6 mb20 mt10">批量录入<span class="colorRed">{{tabHeader.monthStr}}</span>数据</div> <el-form status-icon label-width="100px" :model="newForm" ref='newForm' label-position="top" size="small"> <table border="1" class="fw fz14 color6 table"> <tr> <td rowspan='2'>患者请用姓名<br/>或病历号模糊筛选</td> <td :colspan="tabHeader.firstTables.length" class="tc colorRed lh40">以下信息每1个月登记一次</td> <td :colspan="tabHeader.secondTables.length" class="tc colorRed lh40">以下信息每3个月登记一次</td> <td :colspan="tabHeader.thirdTables.length" class="tc colorRed lh40">以下信息每6个月登记一次</td> </tr> <tr class="lh40"> <td v-for="item in tabHeader.firstTables" :key="item.name" class="tc">{{item.name}}</td> <td v-for="n in tabHeader.secondTables" :key="n.name" class="tc">{{n.name}}</td> <td v-for="z in tabHeader.thirdTables" :key="z.nam" class="tc">{{z.name}}</td> </tr> <tr v-for="(w,index) in newForm.colList" :key="index+'a'" > <td> <el-form-item :prop="'colList.'+index+'.patientId'" > <!--- :rules="{required: true, message: '不能为空', trigger: 'blur'}"--> <el-select v-model="w.patientId" size="small" style="width: 100px" filterable clearable> <el-option v-for="(ite, idx) in patientArr" :label="ite.patient" :key="idx" :value="ite.id"> </el-option> </el-select> </el-form-item> </td> <td class="tc" v-for="(n,j) in w.itemDataList" :key="j"> <el-form-item :prop="'colList.'+index+'.itemDataList.' + j + '.itemValue'" > <!-- :rules="{required: true, message: '不能为空', trigger: 'blur'}"--> <el-select v-model="n.itemValue" size="small" style="width: 100px" v-if="n.type == 2" filterable clearable> <el-option v-for="(i, idx) in n.opts" :label="i" :key="idx" :value="i"> </el-option> </el-select> <el-input style="width: 100px" size="small" v-model="n.itemValue" v-if="n.type == 1" ></el-input> </el-form-item> </td> </tr> </table> <el-row class="mt20" type="flex" justify="start"> <el-col :span="5"> <el-button type="primary" size="small" @click="submitNew('newForm')">提交数据</el-button> </el-col> </el-row> </el-form> </div></template><script>import Vue from 'vue'export default { name: 'DialyInputDetail', props:['dialysisId','dialysisCenter'], data() { return { tabHeader:{ firstTables:[], secondTables:[], thirdTables:[], colNub:[] }, dialyDetail:{}, newForm:{ id:'', colList:[ // { // patientId:123, //患者id // createUserId:123, //当前用户id // createUserName:"管理员" , // itemDataList:[{ // itemId:'', // itemValue:'', // type:1 // }] // } ], }, patientArr:[], } }, created () { this.getMedRdTables(this.dialysisId) this.getPatient(this.dialysisId) }, methods: { getMedRdTables(id){//获取录入tab this.$axios.get(this.$my.api + '/bms/input/getMedRdTables?dialysisId='+id).then(res => { if(res.data&&res.data.code === 200){ this.tabHeader = res.data.data this.tabHeader.colNub = [...res.data.data.firstTables,...res.data.data.secondTables,...res.data.data.thirdTables] this.newForm.colList = [] for(let i=0;i<5;i++){//要push的对象，必须写在循环体内 let arr = [] let obj = { patientId:'', dialysisId:res.data.data.auth.dialysisId, //透析中心id dialysisCenter:res.data.data.auth.dialysisCenter, //透析中心名称 //patientId:'', //患者id //patient:'', //患者名称 inputAuthId:res.data.data.auth.id, //透析中心权限id year:res.data.data.auth.inputYear, //录入年份 month:res.data.data.auth.inputMonth, createUserId:JSON.parse(localStorage.getItem('userInfo')).session.id, createUserName:JSON.parse(localStorage.getItem('userInfo')).session.name, } this.tabHeader.colNub.map(n=>{ arr.push({itemId:n.id ,opts:n.opts ,itemValue:'',type:n.type}) }) obj.itemDataList = arr this.newForm.colList.push(obj) } }else{ this.$message({ message: res.data.message, type: 'error', duration: 1500 }) return false } }).catch(function (error) {}) }, getDialyDetail(id){//获取透析中心详情 this.$axios.get(this.$my.api + '/bms/input/getDialyDetail?id='+id).then(res => { if(res.data&&res.data.code === 200){ this.dialyDetail = res.data.data }else{ this.$message({ message: res.data.message, type: 'error', duration: 1500 }) return false } }).catch(function (error) {}) }, getPatient(id){ this.$axios.get(this.$my.api + '/bms/input/getAllPatList?dialysisId='+id).then(res => { if(res.data&&res.data.code === 200){ this.patientArr = res.data.data }else{ this.$message({ message: res.data.message, type: 'error', duration: 1500 }) return false } }).catch(function (error) {}) }, submitNew(formName){ //新增-原本所有都是必填项，后改为name和hb值必填 this.$refs[formName].validate((valid) => { if (valid) { let ok = false this.newForm.colList.map((item)=>{ if(item.patientId){ let name = item.itemDataList.find((n)=>n.itemId == 33) if(name&&name.itemValue=='') ok = true } }) if(this.newForm.colList.every((item)=>item.patientId == '')){ this.$message({ message: '至少填写一个患者', type: 'error', duration: 1500 }) return false } if(ok){ this.$message({ message: '透析前舒张压(mmHg)不能为空', type: 'error', duration: 1500 }) return false } this.$axios.post(this.$my.api + '/bms/input/bathSaveRecord', this.newForm.colList).then(res => { if(res.data&&res.data.code === 200){ this.$message({ message: res.data.message, type: 'success', duration: 1500 }) this.$refs[formName].resetFields(); }else{ this.$message({ message: res.data.message, type: 'error', duration: 1500 }) } }).catch( error =>{}) } else { console.log('error submit!!'); return false; } }); } },}</script><style scoped>.table{ border-color: #aaa; width: 1000px; overflow: auto;}.table .el-form-item--small.el-form-item{ margin: 8px;}</style> |
部分必选：
|
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
|
data(){ return { formList:[{ patient:'', caseNumber:'', year:'', sex:'', dialysisAge:'', primaryDisease:'', diagnosis:'', creatinine:'', gfr:'', weekTreatTimes:'', weekDialysisHours:'' },{ patient:'', caseNumber:'', year:'', sex:'', dialysisAge:'', primaryDisease:'', diagnosis:'', creatinine:'', gfr:'', weekTreatTimes:'', weekDialysisHours:'' },{ patient:'', caseNumber:'', year:'', sex:'', dialysisAge:'', primaryDisease:'', diagnosis:'', creatinine:'', gfr:'', weekTreatTimes:'', weekDialysisHours:'' }] }, methods:{ submitData(){ let param={ dialysisId:this.$route.query.id, dialysisCenter:this.$route.query.name, createUserName:JSON.parse(localStorage.getItem('userInfo')).session.name, createUserId:JSON.parse(localStorage.getItem('userInfo')).session.id, patientList:nweArr } // 部分必选 start let ok = false // 需要必选的值 let rules = [{name:'patient',msg:'姓名'},{name:'caseNumber',msg:'身份证'},{name:'year',msg:'年龄'},{name:'sex',msg:'性别'}] this.formList.map((item)=>{ //每一行，是否有值 let hangNoVal = Object.keys(item).every(n=>item[n] == '') if(!hangNoVal){ //任意一个有值 for(let i of rules){ if(item[i.name] == ''){//必填项是否有值 this.$message({ message: i.msg+'不能为空！', type: 'error', duration: 1500 }) break } } }else{ ok = true } }) if(ok){ this.$message({ message: '请填写，再提交', type: 'error', duration: 1500 }) return false } // 部分必选 end this.$axios.post(this.$my.api + '/bms/input/bathSavePat',param).then(res => { if(res.data&&res.data.code === 200){ //ok } }).catch(function (error) {}) }, }}//情况二：有输入，才必填// 部分必选 startlet ok = []let no = '' // 需要必选的值 let rules = [{name:'patient',msg:'姓名'},{name:'caseNumber',msg:'身份证'},{name:'year',msg:'年龄'},{name:'sex',msg:'性别'}] this.formList.map((item)=>{ //每一行，是否有值 let hangNoVal = Object.keys(item).every(n=>item[n] == '') if(!hangNoVal){ //任意一个有值 ok.push(false) for(let i of rules){ if(item[i.name] == ''){//必填项是否有值 no = true this.$message({ message: i.msg+'不能为空！', type: 'error', duration: 1500 }) break } } }else{ ok.push(true) } }) if(ok.every(n=>n == true)){ this.$message({ message: '请填写，再提交', type: 'error', duration: 1500 }) return false } if(no){ return false } // 部分必选 end |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_25252769/article/details/90405925
