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

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

<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,'@@@')
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

记录一期Typecho WebShell木马渗透的经历

我创建了一个Typecho的轻量博客,之前一直是本地运行,最近才上了公网,平时自己也是粗心大意,把密码也写在第一篇博文里面 有一天,我突发奇想的想要提交更新,本博客是通过git进行代码版本管理的避免自己修改官方源码出现了问题,无法还原,也定时备份SQL, 然后莫名其妙的发现多了…

html--地图

<!DOCTYPE html> <html lang"en"> <head><meta charset"utf-8"><title>ECharts</title><!--Step:1 引入一个模块加载器&#xff0c;如esl.js或者require.js--><script src"js/esl.js"></scr…

【Doris的安装与部署】

1 集群规划和环境准备 Doris作为一款MPP架构的OLAP数据库&#xff0c;可以在绝大多数主流的商用服务器上运行。 1.1 环境要求 一般推荐使用Linux系统&#xff0c;版本要求是CentOS 7.1及以上或者Ubuntu 16.04及以上&#xff0c;这也是目前服务器市场最主流的操作系统。 操作…

3月份太阳镜行业线上市场销售数据分析

在消费者行为方面&#xff0c;太阳镜不仅仅是视力保护工具&#xff0c;更逐渐成为一种时尚单品。随着人们对健康和美容重视程度的提高&#xff0c;太阳镜作为体现个人风格的单品&#xff0c;其市场需求得到了进一步的推动。此外&#xff0c;全球旅行和旅游业的恢复&#xff0c;…

小程序|手写签名功能如何开启?

老师们可以利用易查分的手写签名功能&#xff0c;在发布查询后&#xff0c;让学生或家长签字确认知晓。下面教大家如何使用吧。 &#x1f4cc;使用教程 &#x1f50e;在哪里开启手写签名&#xff1f; 按照正常流程创建查询后&#xff0c;在查询管理页找到需要开启签名功能的查…

python实现读取串口数据-使用LibModbus库实现一个实时读取串口数据

在工业自动化领域&#xff0c;Modbus协议因其简单、可靠和广泛支持而备受青睐。其中&#xff0c;Modbus RTU&#xff08;串行通信&#xff09;以其低成本和易实施性在许多场景中发挥着重要作用。 01 Modbus RTU协议简介 Modbus RTU是一种基于串行通信的Modbus协议&#xff0c;…

SQL——SERVER的建表主要操作

目录 一&#xff1a;数据存储问题 1.表的相关数据 2.表&#xff0c;字段&#xff0c;记录 二&#xff1a;建表 1.创建表头 2. 数据类型 3.保存数据 4.数据冗余 5.使用命令重置表 7.设置主键 一&#xff1a;数据存储问题 1.表的概念 表是数据库的基本单位&#xff…

运维别卷系列 - 云原生监控平台 之 03.prometheus label 实践

文章目录 [toc]label 简介自定义标签relabel_configsregexrelabel_action metric_relabel_configs两者的区别 实践 label 简介 label 对于 Prometheus 来说&#xff0c;属于数据处理的方式&#xff0c;Prometheus 是通过指定的 label 来查询数据 Prometheus 的 target 中实例&…

elasticsearch-head 源码运行

1、下载安装nodejs 地址&#xff1a;Node.js — Run JavaScript Everywhere 2、git下载 elasticsearch-head 源码 地址&#xff1a;GitHub - mobz/elasticsearch-head: A web front end for an elastic search cluster 3、使用cmd 进入 elasticsearch-head 目录 4、依次执…

代码随想录算法训练营Day 42| 动态规划part04 | 01背包问题理论基础I、01背包问题理论基础II、416. 分割等和子集

代码随想录算法训练营Day 42| 动态规划part04 | 01背包问题理论基础I、01背包问题理论基础II、416. 分割等和子集 文章目录 代码随想录算法训练营Day 42| 动态规划part04 | 01背包问题理论基础I、01背包问题理论基础II、416. 分割等和子集01背包问题理论基础一、01背包问题二、…

Redis-如何保证与Mysql数据一致性

文章目录 Redis与Mysql数据一致性的情况有哪些&#xff1f;Redis与Mysql数据保持一致性的方案&#xff1f;同步双写机制删除缓存重新加载机制延迟双删机制利用MQ保持数据一致性 本篇小结 更多相关内容可查看 Redis与Mysql数据一致性的情况有哪些&#xff1f; Redis和MySQL是两…

Dart 3.4 发布:Wasm Native Macros(宏)

Google I/O 的结束&#xff0c;除了 Flutter 3.22 的发布 &#xff0c;Dart 3.4 也迎来了它是「史诗级」的更新&#xff0c;之所以这么说&#xff0c;就是因为 Wasm Native 的落地和 Macros 的实验性展示。 在此之前&#xff0c;其实我也提前整理过一些对应的内容&#xff0c;…

Web课外练习7

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>照片墙</title><style>body {display: …

基于物联网、大数据的企业智能设备管理系统的实践解读

随着物联网、大数据的迅速发展&#xff0c;智能化设备管理系统已经渗透到我们工作的方方面面。然而&#xff0c;传统企业设备管理也迈入智能化、无纸化的管理趋势。因此&#xff0c;智能设备管理系统有了很大的应用需求&#xff0c;智能设备管理系统以数字化技术&#xff0c;为…

好文推荐:基于热红外的双源能量平衡(TSEB)模型--从植物到全球尺度的蒸散诊断简史

文献 近日&#xff0c;美国农业部农业研究服务局&#xff08;USDA-ARS&#xff09;的科学家们发表了一篇重要的研究论文——“Agricultural and Forest Meteorology” &#xff08;https://www.sciencedirect.com/journal/agricultural-and-forest-meteorology&#xff09;&…

ShellCode详解三

直接进入正题。 在完成正式的shellcode代码导出之前&#xff0c;我们先手动的对代码进行导出&#xff0c;以使各位同学更加了解其原理。 手动注入shellcode 1、我们利用DLE工具找到上一节中我们生成的PE文件的代码段位置 上述图片就是我们的代码段位置 2、利用WinHex工具我…

Kotlin协程实战指南:解锁Android开发高效能新时代

前言 在移动互联网的狂飙突进之中&#xff0c;Android开发领域如同站在风口的勇士&#xff0c;不断接受技术迭代与创新的双重洗礼。在这个快速变化的市场里&#xff0c;用户对应用性能和体验的期待水涨船高&#xff0c;开发者们面临的挑战也越来越大&#xff1a;如何在功能的丰…

php后端通过ajax接口返回二进制数据流,让前端下载excel文件(ajax传递json参数)

//导出数据function exportUser() {var url ?mUser&auserDeal&actexportUser;var data JSON.stringify({user_province:$(#province).val(),user_city: $(#city).val(),user_area: $(#area).val(),user_depart: $(#user_depart).val(),user_offices: $(#user_office…

Jumia跨境电商自养号补单测评的最新技术和策略

Jumia作为非洲最大的电商平台之一&#xff0c;成立于2012年&#xff0c;也是唯一一家真正意义上覆盖全非洲的电商平台&#xff0c;主要覆盖尼日利亚、摩洛哥、埃及、肯尼亚、巴基斯坦、科洛迪瓦等11个国家。 各个站点是分开运营的&#xff0c;各自有独立的前后台&#xff0c;J…

写一个类ChatGPT应用,前后端数据交互有哪几种

❝ 对世界的态度&#xff0c;本质都是对自己的态度 ❞ 大家好&#xff0c;我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder 前言 最近&#xff0c;公司有一个AI项目&#xff0c;要做一个文档问答的AI产品。前端部分呢&#xff0c;还是「友好借鉴」Cha…