动态el-form表单以及动态禁用

news2025/1/21 21:59:37

当右侧下拉框选中为 长期有效,那么左侧输入框为禁用状态;

<el-form-item label="证明有效期" class="is-required">
                            <div v-for="(item,index) in form.arrayDat" :key="index" style="width: 100%;display: flex;justify-content: space-between;">
                                <div style="width: 85%;display: flex;justify-content: space-between;margin-bottom: 20px">
                                    <el-form-item style="width: 40%" :prop="'arrayDat.'+index+'.count'" :rules="[{required: true,message:'请输入',trigger: 'blur'}]">
                                        <el-input v-model="item.count" placeholder="请输入" :disabled="item.flag"/>
                                    </el-form-item>
                                    <el-form-item style="width: 50%" :prop="'arrayDat.'+index+'.deadline'" :rules="[{required: true,message:'请选择',trigger: 'change'}]">
                                        <el-select v-model="item.deadline" placeholder="请选择" @change="validChange">
                                            <el-option v-for="dict in prove_deadline" :key="dict.value" :label="dict.label"
                                                       :value="dict.value"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                                <div style="width: 8%;display: flex;">
                                    <el-button icon="Plus" type="text" @click="add"></el-button>
                                    <div class="del" v-if="form.arrayDat.length > 1">
                                        <el-button icon="Minus" type="text" @click="del(index)"></el-button>
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
const data = reactive({
    form: {
        // 新增行
        arrayDat: [{count:'',deadline:'',flag: false}]
    },
})
const { form } = toRefs(data);

 核心:

const validChange = (val) => {
    for (let i = 0; i < form.value.arrayDat.length; i++) {
        // 如果当前元素的 deadline 值为 3
        if (form.value.arrayDat[i].deadline == '3') {
            // 将对应的 flag 输入框设置为禁用状态
            form.value.arrayDat[i].flag = true;
        } else {
            // 否则设置为启用状态
            form.value.arrayDat[i].flag = false;
        }
    }
    console.log(form.value.arrayDat,'@@@')
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1673758.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深度解读《深度探索C++对象模型》之虚继承的实现分析和效率评测(二)

目录 通过子类的指针存取虚基类成员的实现分析 通过第一基类的指针存取虚基类成员的实现分析 通过第二基类的指针存取虚基类成员的实现分析 通过虚基类的指针存取虚基类成员的实现分析 小结 存取虚基类成员与普通类成员的效率对比 接下来我将持续更新“深度解读《深度探索…

WS2812B-2020 智能控制LED集成光源芯片IC

一般说明 WS2812B-2020是一款智能控制LED光源&#xff0c;它的外部采用了最新的模压封装技术&#xff0c;控制电路和RGB芯片集成在一个2020组件中。其内部包括智能数字端口数据锁存器和信号整形放大驱动电路。还包括一个精密的内部振荡器和一个电压可编程恒流控制部分&…

对关系型数据库管理系统的介绍

1.数据库的相关介绍 关系型数据库管理系统&#xff1a;&#xff08;英文简称&#xff1a;RDBMS&#xff09; 为我们提供了一种存储数据的特定格式&#xff0c;所谓的数据格式就是表&#xff0c; 在数据库中一张表就称为是一种关系. 在关系型数据库中表由两部分组成&#xf…

嵌入式和单片机的区别在哪?

嵌入式和单片机是两个不同的概念&#xff0c;它们在很多方面都存在着差异。嵌入式系统是一种专用的计算机系统&#xff0c;通常用于控制和监测其他设备。它通常由微处理器、存储器、输入/输出接口和其他外围设备组成。嵌入式系统可以运行各种操作系统&#xff0c;如 Linux、Win…

TCP/UDP通信中的部分函数

UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09;和TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是互联网协议套件中最常用的两种传输层协议&#xff0c;它们负责在互联网中端到端地传输数据。尽管它们服务…

web网页录音(recorder.js)并上传后端语音转文字(Vosk)

我是一个后端开发人员&#xff0c;现在都快进化成全栈了。操了&#xff0c;是谁有好的项目让我跳跳槽&#xff0c;转转行吧 写在前面&#xff0c;很重要 这是官方文档的说明 翻译如下&#xff1a; 我们有两种型号-大型号和小型号&#xff0c;小型号非常适合在移动应用程序上执…

IT行业现状与未来趋势分析

IT行业现状与未来趋势显示出持续的活力和变革&#xff0c;以下是上大学网&#xff08;www.sdaxue.com&#xff09;关于IT行业现状与未来趋势分析&#xff0c;供大家参考。 当前现状&#xff1a; 市场需求持续增长&#xff1a;随着信息时代的深入发展&#xff0c;各行各业对信息…

一条查询SQL的执行过程

1.1 假设 查询语句为&#xff1a;mysql> select * from T where ID 10 1.2 总体执行流程 1.2.1 连接器 -> 连接 作用&#xff1a;负责跟客户端建立连接、获取权限、维持和管理连接等工作流程&#xff1a; 一个用户成功建立连接后&#xff0c;如果客户端太长时间没有请…

跨ROS系统通信:使用TCP实现节点间的直连

当涉及到在机器人操作系统&#xff08;ROS&#xff09;环境中的通信时&#xff0c;标准做法通常是在同一个ROS网络内通过话题和服务进行。但在某些特定情况下&#xff0c;比如当你有两个分布在不同网络中的ROS系统时&#xff0c;标准的通信方法可能不太适用。此时&#xff0c;一…

SpringBoot集成Seata分布式事务OpenFeign远程调用

Docker Desktop 安装Seata Server seata 本质上是一个服务&#xff0c;用docker安装更方便&#xff0c;配置默认&#xff1a;file docker run -d --name seata-server -p 8091:8091 -p 7091:7091 seataio/seata-server:2.0.0与SpringBoot集成 表结构 项目目录 dynamic和dyna…

EmotiVoice 实时语音合成TTS;api接口远程调用

参考:https://github.com/netease-youdao/EmotiVoice 测试整体速度可以 docker安装: 运行容器:默认运行了两个服务,8501 一个streamlit页面,另外8000是一个api接口服务 docker run -dp 8501:8501 -p 8250:8000 syq163/emoti-voice:latest##gpu运行 (gpu运行遇到CUDA er…

山东齐鲁文化名人颜廷利:朱郭有文才,曲高‘菏’寡星光路

山东齐鲁文化名人颜廷利教授表示&#xff0c;朱郭&#xff08;谐音‘祖国’&#xff09;有文才&#xff0c;《曲高‘菏’寡》星光路… 山东菏泽歌手朱之文在2011年凭借一首《滚滚长江东逝水》一夜成名&#xff0c; 十多年之后的今天&#xff0c;菏泽市网络红人郭有才靠一首《诺…

LeetCode---循环队列

循环队列就是只有固定的内存&#xff0c;存数据&#xff0c;出数据&#xff0c;但是也和队列一样&#xff0c;先进先出。如下图所示&#xff0c;这是他的样子 在head出&#xff0c;tail进&#xff0c;但是这个如果用数组解决的话&#xff0c;就有问题&#xff0c;力扣给我们的接…

Django模型进阶-多对多关系

在Django中&#xff0c;多对多&#xff08;Many-to-Many&#xff09;关系是一种数据库关系&#xff0c;表示一个模型的实例可以与另一个模型的多个实例相关联&#xff0c;同时另一个模型的实例也可以与这个模型的多个实例相关联。换句话说&#xff0c;就是两个模型之间可以存在…

免费SSL证书获取与部署教程

在互联网时代&#xff0c;HTTPS已成为网站安全的基石&#xff0c;为用户数据传输提供加密保障。免费SSL证书的出现降低了部署HTTPS的门槛&#xff0c;尤其对于个人网站、小微企业及测试环境而言&#xff0c;它们是理想的选择。本文旨在提供一份详尽指南&#xff0c;帮助您轻松获…

找到字符串中所有的字母异位词 ---- 滑动窗口

题目链接 题目: 分析: 要找的是在s中和p是异位词的子串, 也就是说子串大小和p相同, 那么就是窗口大小固定的滑动窗口问题可以使用哈希数组来记录每个元素出现的个数, 定义hash1存放p中的各元素个数定义left 0; right 0;进窗口 让right指向的元素进窗口, 即更新hash2中的元素…

基于若依的ruoyi-nbcio流程管理系统支持指定接收人的流程审批

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; h…

【SRC实战】无限获取优惠码

挖个洞先 https://mp.weixin.qq.com/s/HgMK4S8275VvFVbnSp6Qsw “ 以下漏洞均为实验靶场&#xff0c;如有雷同&#xff0c;纯属巧合 ” 01 — 漏洞证明 “ 获取优惠码有次数限制的情况下&#xff0c;如何绕过&#xff1f;” 1、新用户专属福利&#xff0c;免费领100元优惠…

Can not add resource (com.android.aaptcompiler.ParsedResource@a980fbb) to table

具体原因 资源合并时出现编译问题。 1. 什么是资源&#xff1f; 就是res目录下面的values目录下的文件。以及&#xff01;以及&#xff01;你所引入的其他依赖&#xff08;第三方库&#xff09;的values.xml文件 2. 一般什么原因会导致合并出错? 你的资源文件中的内容错误&…

python批量为图片做灰度处理

欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一.前言 二.代码 三.使用 四.总结