首页 > 其他分享 >动态表单如何校验?

动态表单如何校验?

时间:2023-12-19 11:11:50浏览次数:32  
标签:canConfigList required 表单 校验 value prop label 动态 true

记录一下,直接上代码,核心代码就一行。

注:

prop需要定位到表单项的值,如下定义为[${index}].value,即校验canConfigList[${index}].value的值

        <el-form :inline="true" ref="addChannelRef" :model="canConfigList" label-width="110px">
            <el-form-item
                :prop="`[${index}].value`"
                :rules="rules[config.prop]"
                v-for="(config, index) in canConfigList"
                :label="config.label"
            >
                <el-select
                    v-if="config.type === 'select'"
                    @change="handleSelectChange"
                    v-model="config.value"
                    :disabled="config.isDisabled"
                    :placeholder="config.label"
                    :clearable="config.clearable"
                >
                    <el-option
                        v-for="option in config.options"
                        :label="option.label"
                        :value="option.value"
                    />
                </el-select>
                <el-input
                    v-else
                    v-model="config.value"
                    :placeholder="config.label"
                    :clearable="config.clearable"
                />
            </el-form-item>
        </el-form>
const canConfigList = [
    {
        label: "通道类型",
        prop: "type",
        value: 1,
        type: "select",
        clearable: false,
        options: deviceList,
        isShowType: [1, 2, 3],
        required: true
    },
    {
        label: "串口号",
        prop: "serial_port",
        value: "",
        type: "select",
        clearable: true,
        options: [],
        isShowType: [2],
        required: true
    },
    {
        label: "波特率",
        prop: "baudrate",
        value: "9600",
        type: "select",
        clearable: true,
        options: baudrateList,
        isShowType: [2],
        required: true
    }
];
data() {
return {
    canConfigList,
      rules: {
     serial_port: [
          {
required: true,
message: this.$t("请选择串口号"),
trigger: "change",
},
],
can_baudrate: [
{
required: true,
message: this.$t("请选择波特率"),
trigger: "change",
},
]
},
portList: [],
canConfigList: JSON.parse(JSON.stringify(canConfigList)),
};
}
 

 

标签:canConfigList,required,表单,校验,value,prop,label,动态,true
From: https://www.cnblogs.com/yaokunlun/p/17913232.html

相关文章

  • layui 时间控件 动态js渲染添加
    <tableclass="layui-table"id="myTable"><thead><tr><th>日期</th><th>操作</th></tr></thead><tbody><tr><td>......
  • RK3568 android12 动态替换开机logo
    前言:最近客户有个需要,通过adbpush来动态替换开机logo。通过网上查阅相关资料,现整理如下。参考:RK3568Android/Linux系统动态更换U-Boot/KernelLogo解决方法:通过自定义一个分区来存储开机logo,这样在恢复出厂时不会丢失开机logo。然后通过修改u-boot/drivers/video/drm/rock......
  • 动态规划泛做
    CF833BTheBakery令\(f_{i,k}\)表示前\(i\)个数字分成\(k\)段的最大总价值,显然有暴力转移\(f_{i,k}=f_{j,k-1}+kind(j+1,i)\),其中\(kind(x,y)\)表示\([x,y]\)中不同数字的种数。但暴力转移是\(O(n^2k)\)的,考虑把\(kind\)函数拆开优化,把每种数字的贡献对应到区间......
  • 给已安装的nginx动态添加模块
    以添加echo-nginx-module模块为例查看现有nginx的编译参数$nginx-Vnginxversion:nginx/1.20.2builtbygcc4.8.520150623(RedHat4.8.5-44)(GCC)builtwithOpenSSL1.0.2k-fips26Jan2017TLSSNIsupportenabledconfigurearguments:--user=nginx--group=......
  • JavaWeb - Day09 - Mybatis - 基础操作、XML映射文件、动态SQL
    01.Mybatis-基础操作-环境准备需求需求说明:根据资料中提供的《tlias智能学习辅助系统》页面原型及需求,完成员工管理的需求开发。通过分析以上的页面原型和需求,我们确定了功能列表:查询根据主键ID查询条件查询新增更新删除根据主键ID删除根据......
  • python动态规划求解最长回文子串
    回文是什么,回文是正着读和反着读都是一样的字符叫着回文。 如‘aba’,‘aa’,‘b’,这些都是回文classSolution:deflongestPalindrome(self,s:str)->str:n=len(s)dp=[[False]*nfor_inrange(n)]ans=""forlinrange(n):......
  • easyexcel只通过表名来动态查询并动态导出数据
    EasyExcel动态表头即动态数据生成1️⃣业务需求需要将数据库中的所有表放在一个下拉框中,下拉框支持模糊查询到相关的表,然后通过这个表名查询到数据库的数据,切换不同的表查询出来相关表的列和数据需要注意的点:1)js实现模糊搜索   2)导出的表头和数据都是动态生......
  • 动态规划进阶
    数位DP常见的模板:询问\(l\simr\)中有多少个满足给定条件的数,\(1\lel\ler\le10^{18}\)。这种问题,数位DP可以做到\(O(\logv)\)级别,其中\(v\)是\(l,r\)的值域。思路直接枚举会枚举大量不可能满足条件的数,可以从数位入手。数位DP的算法流程如下:几个定义:\(len(......
  • js动态加载
    <scripttype="text/javascript">//动态加载js(顺序执行js)functionloadScript(url,callback){varscript=document.createElement("script")script.type="text/javascript";if(script.readyState){//IE......
  • 动态绘制svg
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=......