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-cli 创建模板项目
Nov 19 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
vue选项卡切换的实现案例
Apr 11 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
与数据库连接
2006/10/09 PHP
关于php fread()使用技巧
2010/01/22 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
js最简单的拖拽效果实现代码
2010/09/24 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
vue中监听返回键问题
2019/08/28 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
Python sys.path详细介绍
2013/10/17 Python
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
心理健康日活动总结
2014/05/08 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS