首页 > 其他分享 >vue 使用Element 的form表单如何校验对象中的对象属性?

vue 使用Element 的form表单如何校验对象中的对象属性?

时间:2023-04-25 20:14:32浏览次数:34  
标签:vue form 对象 校验 表单 Element

1、校验对象中的对象属性, 需要特殊处理下:

  

 <template v-if="form.dataType === 0">
          <el-form-item label="芯片类型" prop="configExtend.schemeVersion">
            <el-select v-model="form.configExtend.schemeVersion" clearable size="mini">
              <el-option
                v-for="(dict, index) in cidOptions"
                :key="index"
                :label="dict.dictLabel"
                :value="dict.dictLabel"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="测试协议" prop="configExtend.agreementVersion">
            <el-select v-model="form.configExtend.agreementVersion" clearable size="mini">
              <el-option
                v-for="(dict, index) in testAgreementList"
                :key="index"
                :label="dict.dictLabel"
                :value="dict.dictLabel"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="PCBA SN格式" prop="configExtend.pcbaSn">
            <el-input
              v-model="form.configExtend.pcbaSn"
              clearable
              placeholder="请输入PCBA SN格式"
            />
          </el-form-item>
          <el-row>
            <el-col>
              <el-form-item label="测试项目" prop="configExtend.testInfo" style="width: 100%;">
                <el-card shadow="nerver">
                  <el-checkbox-group v-model="form.configExtend.testInfo">
                    <el-checkbox
                      v-for="(dict, index) in testProjectList"
                      :label="dict.dictLabel"
                      :key="index"
                    >
                      {{ dict.dictLabel }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-card>
              </el-form-item>
            </el-col>
          </el-row>
        </template>

 

标签:vue,form,对象,校验,表单,Element
From: https://www.cnblogs.com/big--Bear/p/17353686.html

相关文章

  • vue使用vue-qr生成二维码
    vue-qr基础使用:第一步,先安装vue-qr插件npminstallvue-qr--save第二步,在想要生成vueQr的Vue页面引入组件importvueQrfrom'vue-qr'第三步,在components中引入VueQr组件components:{VueQr}如下:<script>importVueQrfrom'vue-qr';exportdefault{componen......
  • D. Remove One Element(前缀最大+简单状态机)
    题目D.RemoveOneElement题意输入n(2≤n≤2e5)和长为n的数组a(1≤a[i]≤1e9)。从a中去掉一个数(也可以不去掉)。输出a的最长严格递增连续子数组的长度。思路一种方法是前缀最长和后缀最长,加起来。这种方法比较简单。用状态机来写,定义f[i][0/1]分别表示前缀......
  • React和Vue的区别
    React和Vue是两个非常流行的JavaScript框架,用于构建前端Web应用程序。以下是它们之间的一些区别:模板语法:Vue使用模板语法,它允许您在HTML模板中嵌入Vue代码,类似于AngularJS。React使用JSX语法,它允许您将JavaScript代码嵌入HTML模板中。数据绑定:Vue使用双向数据绑定,这意味着当......
  • vue3+vite自适应PC端
    1、下载包pnpmaddlib-flexible-computerpostcss-px2rempx2rem-loader-D2、在main.ts里引入import"lib-flexible-computer";3、在vite.config.ts写入importpx2remfrom"postcss-px2rem"css:{postcss:{plugins:[px2rem({......
  • Vue3中slot插槽使用方式
    **********************************Vue3中slot插槽使用方式****************************************************参考:https://huaweicloud.csdn.net/638eab83dacf622b8df8d08c.html<templatev-slot:isFang></template>简写v-slot:isFang#isFang<template#isFan......
  • Springboot日期注解失败:while it seems to fit format ‘yyyy-MM-dd‘T‘HH:mm:ss.SSS
    提交字符串到后台映射为Date类型可以加上@DateTimeFormat(pattern="yyyy-MM-ddHH:mm:ss")注解,但是报错了!前端提交字符串到后台,出现如下错误:whileitseemstofitformat'yyyy-MM-dd'T'HH:mm:ss.SSSZ',parsingfails(leniency?null))错误的大致意思就是字符串映射到Da......
  • vue-element-admin报错Error: error:0308010C:digital envelope routines::unsupporte
    安装vue-element-admin报错 nodejs  Node.jsv18.15.0  opensslErrorStack:['error:03000086:digitalenveloperoutines::initializationerror'],library:'digitalenveloperoutines',reason:'unsupported',code:'ERR_OSSL......
  • 动力节点老杜Vue框架教程【二】Vue核心技术
    Vue.js是一个渐进式MVVM框架,目前被广泛使用,也成为前端中最火爆的框架Vue可以按照实际需要逐步进阶使用更多特性,也是前端的必备技能动力节点老杜的Vue2+3全家桶教程已经上线咯!学习地址:https://www.bilibili.com/video/BV17h41137i4/视频将从Vue2开始讲解,一步一个案例,知识点......
  • Element UI 中 el-input 按下回车键会刷新页面的原因及解决方法
    【问题描述】在需求开发的过程中遇到了一个奇怪的问题:点击弹窗开启表单,分明没有添加任何键盘事件,但在按下回车键时会让页面自动刷新,因此影响到了其他功能。 【产生原因】查阅资料后得知,当el-form表单里只有一个 el-input时,按下回车建会自动触发页面提交功能,因此导致了页......
  • Vue3---error xx should be on a new line
    ESLint:':render-header'shouldbeonanewline.(vue/max-attributes-per-line)此问题是由于.eslintrc.js文件中的vue/max-attributes-per-line配置错误产生的"vue/max-attributes-per-line":['error',{"singleline":10,......