element vue 动态单选_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.$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，如果不验证，就删了

批量录入 { {tabHeader.monthStr}}数据

患者请用姓名 或病历号模糊筛选	以下信息每1个月登记一次	以下信息每3个月登记一次	以下信息每6个月登记一次
	{ {item.name}}