devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

弹窗里写表单，el-form表单里循环数组，最后进行表单验证_el-form循环表单验证

作者：我家自动化 | 2024-02-19 05:35:38

赞

踩

el-form循环表单验证

1.展示效果 

 

2.html代码

<el-form>里的 :model="registerForm" 绑定为一个对象， :rules="rules"要配合<el-form-item> 里的:prop一起使用进行表单验证，:prop要动态绑定数组的值，因此可以写为:prop="`processData.${index}.jurisdictionName`

  1. <el-dialog :visible.sync="dialogRegister" width="1200px" :close-on-click-modal="false">
  2.   <div>
  3.     <div class="el-dialog-register-top">资产登记</div>
  4.     <div style="padding: 10px" class="row-col-columns">
  5.       <div class="row-col-columns-1">序号</div>
  6.       <div class="row-col-columns-2">
  7.         <span class="register-star">*</span>主机序列
  8.       </div>
  9.       <div class="row-col-columns-3">
  10.         <span class="register-star">*</span>辖区
  11.       </div>
  12.       <div class="row-col-columns-2">
  13.         <span class="register-star">*</span>型号
  14.       </div>
  15.       <div class="row-col-columns-2">
  16.         <span class="register-star">*</span>资产名称
  17.       </div>
  18.       <div class="row-col-columns-3">
  19.         <span class="register-star">*</span>所属厂家/品牌
  20.       </div>
  21.       <div class="row-col-columns-2">
  22.         <span class="register-star">*</span>使用单位
  23.       </div>
  24.     </div>
  25.  
  26.     <el-form style="width: 100%;" size="medium" :model="registerForm" ref="ruleFormProp" :rules="rules">
  27.       // 循环表单里的数组
  28.       <div v-for="(item, index) in registerForm.processData" :key="index" class="row-col-columns">
  29.         <div class="row-col-columns-1 number">{{ index + 1 }}</div>
  30.         <div class="row-col-columns-2">
  31.           <el-input v-model="item.alarmSerialNumber" disabled></el-input>
  32.         </div>
  33.         <div class="row-col-columns-3">
  34.           <!-- 辖区 -->
  35.           <el-form-item :prop="`processData.${index}.jurisdictionName`" :rules="rules.jurisdictionName">
  36.             <el-input v-model="item.jurisdictionName" disabled></el-input>
  37.           </el-form-item>
  38.         </div>
  39.         <div class="row-col-columns-2">
  40.           <!-- 型号 -->
  41.           <el-form-item :prop="`processData.${index}.model`" :rules="rules.model">
  42.             <el-input v-model="item.model" disabled></el-input>
  43.           </el-form-item>
  44.         </div>
  45.         <div class="row-col-columns-2">
  46.           <el-form-item :prop="'processData.' + index + '.assetsName'" :rules="rules.assetsName">
  47.             <el-input placeholder="请输入" class="addinput" v-model="item.assetsName">
  48.             </el-input>
  49.           </el-form-item>
  50.         </div>
  51.         <div class="row-col-columns-3">
  52.           <el-form-item :prop="`processData.${index}.belongBrandId`" :rules="rules.belongBrandId">
  53.             <el-cascader v-model.trim="item.belongBrandId" ref="cascaderList" @change="handleChange($event, index)"
  54.               :props="{
  55.                 lazy: true,
  56.                 lazyLoad: lazyLoadAdd
  57.               }">
  58.             </el-cascader>
  59.           </el-form-item>
  60.         </div>
  61.         <div class="row-col-columns-2">
  62.           <!-- 使用单位 -->
  63.           <el-form-item :prop="`processData.${index}.useId`" :rules="rules.useId">
  64.             <el-select v-model="item.useId" clearable placeholder="使用单位" class="inputSelect">
  65.               <el-option v-for="item2 in item.useOptions" :key="item2.value" :label="item2.label" :value="item2.value"></el-option>
  66.             </el-select>
  67.           </el-form-item>
  68.         </div>
  69.         <!--<div class="row-col-columns-1 number" @click="clearItem(item)">
  70.           <svg class="iconfont" aria-hidden="true" style="width: 18px; height: 18px">
  71.             <use xlink:href="#el-icon-myshanchu" />
  72.           </svg>
  73.         </div>-->
  74.       </div>
  75.     </el-form>
  76.     <div class="footer-btn">
  77.       <el-button @click="onCancel" class="btnSizeStyle">取 消</el-button>
  78.       <el-button type="primary" @click="onSubmit" class="btnSizeStyle">确 定</el-button>
  79.     </div>
  80.   </div>
  81. </el-dialog>

3.表单验证

表单里绑定的值写在data；表单验证必须使用validator，不然很可能验证不成功

  1. data() {
  2.   var checkassetsName = (rule, value, callback) => {
  3.     if (!value) {
  4.       return callback(new Error('请输入资产名称'));
  5.      } else {
  6.       callback();
  7.     }
  8.   };
  9.   var checkbelongBrandId = (rule, value, callback) => {
  10.     if (value.length === 0) {
  11.       return callback(new Error('请选择所属厂家'));
  12.     } else if (value[0] === 'ditto' && value[1] === 0) {
  13.       return callback(new Error('第一条数据不能为同上'));
  14.     } else if (value.length === 2 && value[0] !== 'ditto') {
  15.       return callback(new Error('请选择品牌'));
  16.     } else {
  17.       callback();
  18.     }
  19.   };
  20.   var checkuseId = (rule, value, callback) => {
  21.     if (!value) {
  22.       return callback(new Error('请选择使用单位'));
  23.     } else {
  24.       callback();
  25.     }
  26.   };
  27.   return {
  28.     dialogRegister: false, // 批量资产登记弹窗
  29.     registerLoading: false,
  30.     registerForm: { // 表单
  31.       processData: [] // 用于接收后端数组
  32.     },
  33.     rules: {
  34.       assetsName: [{ validator: checkassetsName, trigger: 'blur' }],
  35.       belongBrandId: [{ validator: checkbelongBrandId, trigger: 'change' }],
  36.       useId: [{ validator: checkuseId, trigger: 'change' }],
  37.     }
  38.   }
  39. }

4. 获取使用单位

获取使用单位，使用resolve将异步操作成功的数据传参给第7步

  1. // 使用单位
  2. getUse() {
  3.   return new Promise((resolve, reject) => {
  4.     organizationApiManagement('GET', '', 'find').then(res => {
  5.       const arr = [] // 全部
  6.       if (res.code !== '0000') {
  7.         resolve(arr)
  8.       } else {
  9.         res.data.list.forEach(item => {
  10.           const k = {
  11.             serialNo: item.serialNo,
  12.             value: item.id,
  13.             label: item.organizationName
  14.           }
  15.           arr.push(k)
  16.           resolve(arr)
  17.         })
  18.       }
  19.     })
  20.   })
  21. },
  22. // 使用单位数据结构为
  23. // [
  24. //   {label: "华为",serialNo: "1519863055532449792",value: 42},
  25. //   {label: "浙江大华技术股份有限公司",serialNo: "1460855692123456896",value: 2}
  26. // ]

5.根据厂家选择品牌

项目需要根据厂家选择品牌，因此使用联级选择器，看不懂得可以注释相关代码

import { belongBrand } from '@/utils/manufacturerBrand' // 为js文件

  1. // 获取厂家及品牌
  2. async lazyLoadAdd(node, resolve) {
  3.   console.log(node)
  4.   if (node.level === 0) {
  5.     return resolve(await belongBrand(node.level + 1))
  6.   } else if (node.level === 1) {
  7.     return resolve(await belongBrand(node.level + 1, node.value))
  8.   }
  9. },
  10.  
  11. // 即选择厂家也选择品牌，才能给数组push下标，进行rules验证
  12. handleChange(e, index) {
  13.   e.push(index)
  14. },

6. manufacturerBrand.js文件

  1.  
  2. import { organizationApiManagement } from '@/api/property/pointInterface'
  3. import { getBrandApi } from '@/api/property/assets'
  4.  
  5. const belongBrand = async (level, id) => {
  6.   return new Promise((resolve) => {
  7.     console.log(level)
  8.     if (level === 1) {
  9.       const organizationArr = []
  10.       // 获取所属厂家
  11.       organizationApiManagement('GET', '', 'findList').then(res => {
  12.         if (res.code === '0000') {
  13.           res.data.forEach((item) => {
  14.             const k = {
  15.               value: item.id,
  16.               label: item.organizationName,
  17.               children: []
  18.             }
  19.             organizationArr.push(k)
  20.           })
  21.           // 同上数据不加children代表下一级没值了
  22.           const ditto = {value: "ditto" , label: '同上'}
  23.           organizationArr.push(ditto)
  24.           resolve(organizationArr)
  25.         } else {
  26.           resolve(organizationArr)
  27.         }
  28.       })
  29.     } else if (level === 2) {
  30.         const arr = []
  31.         const params = {
  32.           factoryId: id
  33.         }
  34.         // 获取品牌
  35.         getBrandApi(params).then(res => {
  36.           if (res.code === '0000') {
  37.             res.data.forEach(item => {
  38.               const k = {
  39.                 value: item.id,
  40.                 label: item.typeName,
  41.                 children: [],
  42.                 leaf: true // 这个代表联级选择到此结束
  43.               }
  44.               arr.push(k)
  45.             })
  46.             resolve(arr)
  47.           } else {
  48.             resolve(arr)
  49.           }
  50.         })
  51.       // }
  52.     }
  53.   })
  54. }
  55. export { belongBrand }
  56.  
  57. // 所属厂家数据结构
  58. // [
  59. //   {children: [], label: "华为", value: 42},
  60. //   {children: [], label: "浙江宇视科技有限公司", value: 15},
  61. //   {label: "同上",value: "ditto"}
  62. // ]
  63.  
  64. // 选择华为获得的品牌
  65. // [
  66. //   {children: [], label: "华为",leaf: true, value: 12}
  67. // ]

7. 或取表单数组，赋值渲染页面

获取后台数组，本来后端这部没写接口，但是不写接口我的inpurt和select都选择不了，我以为要写异步，我将选中行列表的数据放到promis里面使用，但还是不行，所有又麻烦后端写接口

  1. // 批量资产登记
  2. async assetsRegister() {
  3.   this.registerLoading = true
  4.   // 因为除了第一个都要有同上选项，因此放在了这里
  5.   const useOptions = await this.getUse() // 使用单位列表
  6.   // 根据主机序列号获取详情信息
  7.   const host = ['188720045', '450022554']
  8.   // this.selectList为选中行的数据，因为你们没有，我写默认值
  9.   //this.selectList.forEach(item => {
  10.   //  host.push(item.alarmSerialNumber)
  11.   //})
  12.   const params = { alarmSerialNumber: host }
  13.   alarmRecordApiManagement('GET', 'findDetail', params).then(res => {
  14.     switch (res.code) {
  15.       case '0000':
  16.         res.data.forEach((item, index) => {
  17.           item.assetsName = '' // 资产名称
  18.           item.jurisdictionCode = '43010413' // 银盆岭编码，传给后台
  19.           item.jurisdictionName = '湖南省长沙市岳麓区银盆岭街道' // 前端显示
  20.           item.model = '其他'
  21.           item.belongBrandId = [] // 同时绑定所属厂家(数组第一个值)和品牌(第二个值)绑定的值
  22.           item.useId = '' // 使用单位
  23.           item.useOptions = useOptions // 使用单位下拉数组
  24.           
  25.           const dittoVal = [{ value: "ditto", label: '同上' }]
  26.           if (index !== 0) { // 不是第一条，都同上
  27.             item.useId = 'ditto'
  28.             // 此方法不改变原数组添加数据，从第二条开始数据包含同上
  29.             item.useOptions = item.useOptions.concat(dittoVal)
  30.           }
  31.         })
  32.         this.registerForm.processData = res.data
  33.         this.dialogRegister = true
  34.         this.registerLoading = false
  35.         break
  36.       default:
  37.         this.$message.error(res.message)
  38.         this.registerLoading = false
  39.         break
  40.     }
  41.   })
  42. },
  43.  
  44. // 因为不写接口，前端会有问题，所有这个接口里面没什么值，有用的只有
  45. //[
  46. //  {alarmSerialNumber:"188720045"},
  47. //  {alarmSerialNumber:"450022554"}
  48. //]

8. 取消和确定事件

  1. // 取消
  2. onCancel() {
  3.   this.registerForm.processData = []
  4.   this.dialogRegister = false
  5. },
  6.  
  7. // 确定
  8. onSubmit() {
  9.   this.$refs.ruleFormProp.validate((valid) => {
  10.     if (valid) {
  11.       console.log('执行操作')
  12.     }
  13.   })
  14. }

9. css样式

  1. .el-dialog-register-top {
  2.   margin-top: -30px;
  3.   padding: 10px;
  4.   font-size: 18px;
  5.   color: #333;
  6.   border-bottom: 1px solid #E4E7ED;
  7. }
  8.  
  9. .row-col-columns {
  10.   color: #333;
  11.   display: flex;
  12.   margin-left: 8px;
  13.   div {
  14.     padding-right: 5px;
  15.   }
  16.   ::v-deep .el-input.is-disabled .el-input__inner {
  17.     color: #333;
  18.   }
  19.   .number {
  20.     padding: 10px 0 0 15px;
  21.   }
  22.   .row-col-columns-1 {
  23.     width: 40px;
  24.   }
  25.   .row-col-columns-2 {
  26.     width: 180px;
  27.   }
  28.   .row-col-columns-3 {
  29.     width: 240px;
  30.   }
  31.   .register-star {
  32.     color: #F56C6C;
  33.   }
  34. }

10. 每个接口后端返回的值我都写在后面了，你们可以进行替换，相关注释也写在代码中

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/112948
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号