如何在vue中利用element动态加载表单-创新互联

本篇文章给大家分享的是有关如何在vue中利用element动态加载表单，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

一、问卷动态加载表单

//html
  
 
 
 
 {{ 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，如果不验证，就删了

.table{
 border-color: #aaa;
 width: 1000px;
 overflow: auto;
}
.table .el-form-item--small.el-form-item{
 margin: 8px;
}

部分必选：

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) {})
 },
 }
}

//情况二：有输入，才必填
// 部分必选 start
let 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

以上就是如何在vue中利用element动态加载表单，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。