vue+element实现动态加载表单


Posted in Vue.js onDecember 13, 2020

本文实例为大家分享了vue+element实现动态加载表单的具体代码,供大家参考,具体内容如下

一、问卷动态加载表单

vue+element实现动态加载表单

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

二、批量数据动态加载表单

vue+element实现动态加载表单

特点:

1.每一行的输入框,根据后台返回值,动态生成,数量可增可减。
2.行数根据自己设置的值 5 ,自动循环生成。
3.验证需要:prop和:rules,如果不验证,就删了

<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>

部分必选:

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.js 相关文章推荐
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 #Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 #Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 #Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 #Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 #Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 #Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 #Vue.js
You might like
php 验证码实例代码
2010/06/01 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
javascript 日期常用的方法
2009/11/11 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
文言文形式的学生求职信
2013/12/03 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
就业推荐表导师评语
2014/12/31 职场文书
出国留学单位推荐信
2015/03/26 职场文书
公司员工辞职信范文
2015/05/12 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
Go语言编译原理之变量捕获
2022/08/05 Golang