web前端-el-form-item表单动态设置prop，rules

àì夳堔傛蜴生んèń 2023-10-03 11:11 109阅读 0赞

绑定动态变量 :prop，:rules

<el-form-item label="时间" :prop="classDateType" :rules="rules.classDateTypeRule">
              <el-date-picker clearable size="small" style="width:380px"
                v-model="classDateValue"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择时间">
              </el-date-picker>
            </el-form-item>

声明变量

data() {
        return {
          //时间类型：begintime-开始时间；endtime-结束时间
          classDateType:"",
          //时间类型值
          classDateValue:null,
    
          // 表单校验
          rules: {
            //开始结束时间
            classDateTypeRule: [
              //{ required: true, message: "开始结束时间不能为空", trigger: "blur" }
              {
                required: true,
                validator: this.dateRequired,
                trigger: "blur"
              }
            ]
          }
        }
    }

动态修改值

methods: {
        //开始班次
        handleBeginClass() {
            this.classDateType = "begintime";
        },
    
        //结束
        handleEndCLass() {
          this.classDateType = "endtime";
        },
    
        //时间的验证卡控
        dateRequired(rule, value, callback) {
          console.log("dateRequired时间的验证卡控rule" + rule + "-- value：：" + value + " -- callback" + callback);
          if (value) {
    
          } else {
    
          }
          callback();
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，109人围观）

还没有评论，来说两句吧...

相关阅读

相关 web前端-el-form-item表单动态设置prop，rules

绑定动态变量 :prop，:rules  <el-form-item label="时间" :prop="cl

àì夳堔傛蜴生んèń/ 2023年10月03日 11:11/ 0 赞/ 110 阅读

相关 web前端-Vue动态显示隐藏表单el-form-item

给每项表单项添加一个自己的id名，并用v-model绑定相对应的数据，利用v-if根据上一个表单项的数据值来进行显示或隐藏

向右看齐/ 2023年10月03日 11:11/ 0 赞/ 73 阅读

相关 Web(四)构建Web表单-表单的结构

第1关\_分组元素相关的概念 input控件：是单行输入型控件，用来接受用户输入的信息。 textarea控件：用来创建一个支持多行的文本输入区域。 s

朴灿烈づ我的快乐病毒、/ 2023年09月24日 14:43/ 0 赞/ 128 阅读

相关 web前端学习2-html表单

学习2-表单表单1 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

r囧r小猫/ 2023年02月17日 03:55/ 0 赞/ 90 阅读

相关动态表单（一）动态表单的定义

什么是动态表单？根据爱因斯坦相对论有动态表单说明是有静态表单的存在，生活中乃至世界任何两个有质量的物体都是运动的，这只是相对论的狭隘解析

快来打我*/ 2022年09月19日 01:27/ 0 赞/ 358 阅读

相关前端HTML表单

表单简介：标签名：form 用于将数据发送到服务器 <form action="服务器地址"></form> 表单项： > 文本框： >

比眉伴天荒/ 2022年09月03日 14:25/ 0 赞/ 308 阅读

相关 web表单

1.表单介绍表单通常用来收集网页访问者信息，常见的表单比如搜索引擎的搜索框、各网页应用的注册或者登陆界面等。一个表单通常包括多个表单控件，一些常用的表单控件如下：添加文

矫情吗；*/ 2022年06月03日 00:09/ 0 赞/ 291 阅读

相关前端表单验证

1.输入框只能输入数字： input type="text" onkeyup="value=value.replace(/[^\d]/g,'')"> 2.JavaS

妖狐艹你老母/ 2022年05月13日 07:58/ 0 赞/ 398 阅读

相关动态表单

项目中往往需要动态的创建一个表单，或者添加一个新的数据模板，这时候因为需要在运行时动态的创建表以及动态的维护表字段甚至表关系，本篇博客，做一个简单的示例数据库表 DD

叁歲伎倆/ 2022年03月29日 16:58/ 0 赞/ 493 阅读

相关 Web前端——表单提交和Js添加选项

表单表单提交表单提交之后会将表单的数据以get或post方式，传送到action要打开的页面方式1：使用提交按钮 <form action=""

淩亂°似流年/ 2021年12月13日 03:09/ 0 赞/ 281 阅读