elementui动态生成表单,element 动态表单
这篇文章主要为大家详细介绍了某视频剪辑软件元素实现动态加载表单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素实现动态加载表单的具体代码，供大家参考，具体内容如下
一、问卷动态加载表单
//html
El-form:model= ques paper status-icon label-width= 100 px label-position= top size= small v-loading= paper loading
埃尔-表单-项目
纸质表单中的v-for= n .答案列表
:label= n .问题存储库。问题
:key=n.key
！-单选-
El-radio-group v-model= n . option id v-if= n .问题存储库。类型===1
el-radio v-for=(i，idx)in n . question option :label= I . id :key= idx class= mb5 { I . question option } }/El-radio
/el-radio-group
！-多选-
El-checkbox-group v-model= n . option id v-if= n .问题存储库。类型===2
el-checkbox v-for=(i，idx)in n . question option :label= I . id :key= idx { { I . question option } }/El-checkbox
/el-checkbox-group
！-填空-
El-input type= textarea style= width:600 px class= fl v-model= n . answer v-if= n .问题知识库。 type===3 :rows= 4 placeholder=请输入内容/el-input
/El-表单-项目
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格式
//数据数据
纸质表单：{ //问卷表单
回答列表：[{
问题存储库："",
问题选项：[],
问题Id: ，
选项Id: ，
答案：""
}]
},
//接口
getPaperByDrugStatus(药品状态，id){ //根据用药状态获取问卷
this.paperLoading=true
这个. axios.get(这个. api xxx/xxx？paperId=这个。选择阶段。paperId 药品状态=药品状态).然后(res={
if(res.data.code===200){
let answerArr=[]
让questionArr=[]
研究数据。数据。questiontolist。映射((项目)={
item.optionList.map((n)={
questionArr.push({
id:n.id，
问题选项：n。问题选项
})
})
answerArr.push({
questionOption:questionArr，
问题存储库：项目。问题知识库
问题id:项目。问题存储库。id，
选项标识：项目。问题存储库。type===2？[]:,
答案：""
})
})
控制台。日志(回答)
this.paperForm={ //问卷表单
答案列表：回答Arr
}
setTimeout(()={
this.paperLoading=false
}, 300)
}
})
},
二、批量数据动态加载表单
特点：
1.每一行的输入框，根据后台返回值，动态生成，数量可增可减。
2.行数根据自己设置的值5 ,自动循环生成。
3.验证需要：道具和：规则，如果不验证，就删了
模板
！-录入数据-
div class=DialyInputDetail
div class=fw fz16 color6 mb20 mt10 批量录入span class= colorRed ”选项卡标题。月str } }/span数据/div
El-form status-icon label-width= 100px :model= new form ref= new form label-position= top size= small
表格边框=1 class=fw fz14 color6表格
tr
td rowspan=2 患者请用姓名br/或病历号模糊筛选/td
TD:colspan= tab标题。第一桌。长度 class= TC colorRed lh40 以下信息每一个月登记一次/td
TD:colspan= tab标题。第二张桌子。长度 class= TC colorRed lh40 以下信息每3个月登记一次/td
TD:colspan= tab标题。第三张桌子。长度 class= TC彩色lh40 以下信息每6个月登记一次/td
/tr
tr class=lh40
选项卡标题中的TD v-for=项。 first tables :key= item。name class= TC { { item。name } }/TD
选项卡标题中的TD v-for= n。第二个表:key= n . name class= TC { { n . name } }/TD
选项卡标题中的TD v-for= z。第三个表:key= z . Nam class= TC { { z . name } }/TD
/tr
tr v-for=(w，index)的新形式。“collist”:key=“index a ”
任务描述
埃尔-表单-项目
:prop=colList .索引。患者Id
！-:rules="{要求：真，消息："不能为空，触发器：模糊 } -
El-select v-model= w . patient id size= small style= width:100 px 可过滤可清除
埃尔选项
病人Arr中的v-for=(ite，idx
:label=病人
:key=idx
:value=ite.id
/el选项
/el-select
/El-表单-项目
/td
td class=tc v-for=(n，j) in w.itemDataList :key=j
埃尔-表单-项目
:prop=colList .索引。itemDataList，“j”.项目值""
！-:rules="{要求：真，消息："不能为空，触发器：模糊 } -
El-select v-model= n . item value size= small style= width:100 px v-if= n . type==2 可过滤可清除
埃尔选项
v-for=(i，idx) in n.opts
:label=i
:key=idx
:value=i
/el选项
/el-select
El-input style= width:100p x size= small v-model= n . item value v-if= n . type==1 /El-input
/El-表单-项目
/td
/tr
/表格
El-row class= mt20 type= flex justify= start
el-col :span=5
El-button type= primary size= small @ click= submit new( new form )提交数据/el-button
/el-col
/el-row
/el格式
/div
/模板
脚本
从“vue”导入某视频剪辑软件
导出默认值{
名称：拨号输入详细信息，
道具：[ dialyssid ， dialys center ]，
data() {
返回{
tabHeader:{
第一个表：[],
第二个表：[],
第三个表：[],
colNub:[]
},
dialyDetail:{}，
新表单：{
id: ，
冲突：[
//{
//患者编号：123，//患者编号
//createUserId:123，//当前用户编号
//创建用户名：管理员，
//itemDataList:[{
//itemId:" "，
//itemValue:" "，
//类型：1
//}]
//}
],
},
patientArr:[]，
}
},
已创建(){
这个。getmedrdtables(this。透析器)
这个。耐心点(这个。透析sid)
},
方法：{
getMedRdTables(id){//获取录入标签
这个. axios.get(这个我的。API /BMS/input/getMedRdTables？dialysisId= id).然后(res={
if(RES . data RES . data。代码===200){
this.tabHeader=res.data.data
this.tabHeader.colNub=[.res.data.data.firstTables.RES . data . data . second表.res.data.data.thirdTables]
this.newForm.colList=[]
对于(设I=0；i5；i ){//要推的对象，必须写在循环体内
设arr=[]
让obj={
患者Id: ，
透析id:研究数据。数据。auth。透析id，//透析中心编号
透析中心：研究数据。数据。auth。透析中心，//透析中心名称
//patientId: ，//患者编号
//患者：,//患者名称
输入authid:RES . data。数据。auth。id，//透析中心权限编号
年份：研究数据。数据。auth。输入年份，//录入年份
月：res.data.data.auth.inputMonth，
创建用户id:JSON。解析(本地存储。getitem( userInfo ))。会话。id，
创建用户名：JSON。解析(本地存储。getitem( userInfo ))。会话。姓名，
}
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)
}
}否则{
这个消息({
消息：res.data.message，
类型："错误",
持续时间：1500
})
返回错误的
}
}).接住(函数（错误){})
},
getDialyDetail(id){//获取透析中心详情
这个. axios.get(这个我的。API /BMS/input/getDialyDetail？id= id).然后(res={
if(RES . data RES . data。代码===200){
this.dialyDetail=res.data.data
}否则{
这个消息({
消息：res.data.message，
类型："错误",
持续时间：1500
})
返回错误的
}
}).接住(函数（错误){})
},
getPatient(id){
这个. axios.get(这个我的。API /BMS/input/getAllPatList？dialysisId= id).然后(res={
if(RES . data RES . data。代码===200){
this.patientArr=res.data.data
}否则{
这个消息({
消息：res.data.message，
类型："错误",
持续时间：1500
})
返回错误的
}
}).接住(函数（错误){})
},
submitNew(formName){ //新增-原本所有都是必填项，后改为名字和厚膛壁身管值必填
这个参考文献[表单名]。验证((有效)={
如果（有效){
让ok=假
这个。新形式。碰撞。映射((项目)={
if(item.patientId){
let name=item。项目数据列表。find((n)=n . itemid==33)
如果(姓名姓名。项目值== )确定=真
}
})
如果(这个。新形式。碰撞。每((项)=项。患者id== ){
这个消息({
消息： 至少填写一个患者，
类型："错误",
持续时间：1500
})
返回错误的
}
如果（正常){
这个消息({
消息： 透析前舒张压（毫米汞柱)不能为空，
类型："错误",
持续时间：1500
})
返回错误的
}
这个10.99美元axios.post(这个我的。API /BMS/input/bathSaveRecord ，this.newForm.colList).然后(res={
if(RES . data RES . data。代码===200){
这个消息({
消息：res.data.message，
类型："成功",
持续时间：1500
})
这个参考文献[表单名]。resetFields()；
}否则{
这个消息({
消息：res.data.message，
类型："错误",
持续时间：1500
})
}
}).接住(错误={})
}否则{
console.log(错误提交！);
返回错误的
}
});
}
},
}
/脚本
样式范围。表格{
边框颜色：# aaa
宽度：1000像素
溢出：自动；
}。桌子El-form-item-small。El-表单-项目{
边距：8px
}
/风格
部分必选：
data(){
返回{
表单列表：[{
病人：,
案例号：,
年份：,
性别：,
对话：,
原发疾病：,
诊断结果：,
肌酐：,
gfr: ，
weekTreatTimes: ，
每周例会主持人：""
},{
病人：,
案例号：,
年份：,
性别：,
对话：,
原发疾病：,
诊断结果：,
肌酐：,
gfr: ，
weekTreatTimes: ，
每周例会主持人：""
},{
病人：,
案例号：,
年份：,
性别：,
对话：,
原发疾病：,
诊断结果：,
肌酐：,
gfr: ，
weekTreatTimes: ，
每周例会主持人：""
}]
},
方法：{
submitData(){
让param={
透析Id:这个. route.query.id，
透析记者：这个. route.query.name，
创建用户名：JSON。解析(本地存储。getitem( userInfo ))。会话。姓名，
创建用户id:JSON。解析(本地存储。getitem( userInfo ))。会话。id，
患者列表：nweArr
}
//部分必选开始
让ok=假
//需要必选的值
let rules=[{name:patient ，msg:姓名},{名称：案例号，消息：身份证},{姓名：年份，消息：年龄},{姓名：性别，消息：性别}]
this.formList.map((item)={
//每一行，是否有值
let hangNoVal=Object.keys(item).every(n=item[n]== )
如果(!hangNoVal){ //任意一个有值
为（让我的规则){
if(item[i.name]==){//必填项是否有值
这个消息({
消息：i.msg 不能为空!,
类型："错误",
持续时间：1500
})
破裂
}
}
}否则{
ok=真
}
})
如果（正常){
这个消息({
消息： 请填写，再提交，
类型："错误",
持续时间：1500
})
返回错误的
}
//部分必选目标
这个10.99美元axios.post(这个. my.api /bms/input/bathSavePat ，param).然后(res={
if(RES . data RES . data。代码===200){
//好的
}
}).接住(函数（错误){})
},
}
}
//情况二：有输入，才必填
//部分必选开始
let ok=[]
让否=
//需要必选的值
let rules=[{name:patient ，msg:姓名},{名称：案例号，消息：身份证},{姓名：年份，消息：年龄},{姓名：性别，消息：性别}]
this.formList.map((item)={
//每一行，是否有值
let hangNoVal=Object.keys(item).every(n=item[n]== )
如果(!hangNoVal){ //任意一个有值
好的。推(假)
为（让我的规则){
if(item[i.name]==){//必填项是否有值
否=真
这个消息({
消息：i.msg 不能为空!,
类型："错误",
持续时间：1500
})
破裂
}
}
}否则{
好的。推(真)
}
})
if(ok.every(n=n==true)){
这个消息({
消息： 请填写，再提交，
类型："错误",
持续时间：1500
})
返回错误的
}
如果（否){
返回错误的
}
//部分必选目标
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。