elementvue动态单选_vue+element实现动态加载表单本⽂实例为⼤家分享了vue+element实现动态加载表单的具体代码，供⼤家参考，具体内容如下
⼀、问卷动态加载表单
//html
v-for="n in paperForm.answerList"
:label="n.questionRepository.question"
:key="n.key"
>
{{ i.questionOption }}
{{ i.questionOption }}
保存问卷
//data数据
paperForm: { // 问卷表单
answerList:[{
questionRepository:'',
questionOption:[],
questionId: '',
optionId:'',
answer: ''
}]
},
//接⼝
getPaperByDrugStatus(drugStatus, id){ // 根据⽤药状态获取问卷
this.paperLoading = true
this.$(this.$api + 'xxx/xxx?paperId='+this.selectStage.paperId + '&drugStatus=' + drugStatus).then(res => {
if(de === 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:pe === 2?[]:'',
answer: ''
})
})
console.log(answerArr)
this.paperForm = { // 问卷表单
answerList:answerArr
}
setTimeout(() => {
this.paperLoading = false
}, 300)
}
})
},
⼆、批量数据动态加载表单
特点：
1.每⼀⾏的输⼊框，根据后台返回值，动态⽣成，数量可增可减。
2.⾏数根据⾃⼰设置的值 5 ，⾃动循环⽣成。
3.验证需要:prop和:rules，如果不验证，就删了
批量录⼊ {{hStr}}数据
患者请⽤姓名
或病历号模糊筛选以下信息每1个⽉登记⼀次
以下信息每3个⽉登记
⼀次
以下信息每6个⽉登记
⼀次
{{item.name}}{{n.name}}{{z.name}}
:prop="'colList.'+index+'.patientId'" >
v-for="(ite, idx) in patientArr"
:label="ite.patient"
:key="idx"
:value="ite.id">:prop="'colList.'+index+'.itemDataList.' + j + '.itemValue'"
>
v-for="(i, idx) in n.opts"
:label="i"
:key="idx"
:value="i">
提交数据
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 () {
},
methods: {
getMedRdTables(id){//获取录⼊tab
this.$(this.$my.api + '/bms/input/getMedRdTables?dialysisId='+id).then(res => {
if(res.data&&de === 200){
this.tabHeader = res.data.data
lNub = [...res.data.data.firstTables,...res.data.data.secondTables,...res.data.data.thirdTables] lList = []
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.Item('userInfo')).session.id,
createUserName:JSON.Item('userInfo')).session.name,
}
lNub.map(n=>{
arr.push({itemId:n.id ,opts:n.opts ,itemValue:'',pe})
})
obj.itemDataList = arr
}
}else{
this.$message({
message: ssage,
type: 'error',
duration: 1500
error parse new})
return false
}
}).catch(function (error) {})
},
getDialyDetail(id){//获取透析中⼼详情
this.$(this.$my.api + '/bms/input/getDialyDetail?id='+id).then(res => {
if(res.data&&de === 200){
this.dialyDetail = res.data.data
}else{
this.$message({
message: ssage,
type: 'error',
duration: 1500
})
return false
}
}).catch(function (error) {})
},
getPatient(id){
this.$(this.$my.api + '/bms/input/getAllPatList?dialysisId='+id).then(res => { if(res.data&&de === 200){
this.patientArr = res.data.data
}else{
this.$message({
message: ssage,
type: 'error',
duration: 1500
})
return false
}
}).catch(function (error) {})
},
submitNew(formName){ //新增-原本所有都是必填项，后改为name和hb值必填

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。