当前位置: 首页 > news >正文

【原创】解决vue-element-plus-admin无法实现下拉框动态控制表单功能,动态显隐输入框

前言

目前使用vue-element-plus-admin想要做一个系统定时任务功能,可以选择不同的定时任务类型,比如使用cron表达式、周期执行、指定时间执行等。每种类型对应不同的输入框,需要动态显隐输入框才行,但是这个vue-element-plus-admin很顽固啊,表单貌似初始化后就改不了了,作为一名Java后端工程师只能拼命钻研这个框架了,最终也是解决了这个问题。

 GitHub上也有人在项目里问同样的问题,作者也没给回复,那只能我自己来了

前端页面:选择不同循环类型显示不同的输入框

获取当前的formData

既然下拉框改了,那我form中的数据肯定发生了变化,那我将这个数据通过下拉选的onChange方法重新获取一下不就行了

定义formDataRef,并在下拉选改变时重新获取

const formDataRef = ref(getFormData())const schema = reactive<FormSchema[]>([{field: 'cycleType',label: '循环类型',component: 'Select',componentProps: {placeholder: '请选择循环类型',clearable: true,options: [{label: '指定时间',value: 10},{label: '循环执行',value: 20},{label: 'cron表达式',value: 30}],onChange: (value: number) => {formDataRef.value = getFormData()}}}
])

 其中getFormData()是useForm()中formMethods中的方法

监听formDataRef的变化

目前这个formDataRef是套了几层的东西,没法直接用,我这边又定义了一个realFormData,用于解包一层formDataRef

const formDataRef = ref(getFormData())
const realFormData = ref({})
watch(() => formDataRef,(newVal) => {newVal.value.then((res) => {realFormData.value = res})},{immediate: true,deep: true}
)

将监听到新的formDataRef的值赋值给realFormData,这样终于算是可以直接用了,后面不管有多少个下拉框,直接用realFormData比较就行了。

输入框动态计算是否隐藏

最后就是显隐输入框了,这里采用动态计算remove的值来达成这个功能

  {field: 'cron',label: 'cron表达式',component: 'Input',componentProps: {placeholder: '请输入cron表达式',clearable: true},remove: computed(() => {return realFormData.value.cycleType !== 30})}

例如上面的cron表达式输入框,我通过computed计算属性来判断这个输入框是否显示,目前只有cycleType为30才能显示出这个输入框。

实现效果

结语

这个vue-element-plus-admin对于用户比较复杂的需求有点难以招架,就这么一个较为简单的需求我这个后端程序猿就搞了好久,好在还是解决了

相关文章:

【原创】解决vue-element-plus-admin无法实现下拉框动态控制表单功能,动态显隐输入框

前言 目前使用vue-element-plus-admin想要做一个系统定时任务功能&#xff0c;可以选择不同的定时任务类型&#xff0c;比如使用cron表达式、周期执行、指定时间执行等。每种类型对应不同的输入框&#xff0c;需要动态显隐输入框才行&#xff0c;但是这个vue-element-plus-adm…...

SpringBoot开发——初步了解SpringBoot

文章目录 一、SpringBoot简介 1、什么是Spring Boot2、Spring Boot的优点3、Spring Boot功能 二、Spring与Spring Boot对比三、Spring Boot与Spring MVC四、Spring Boot体系结构五、Springboot Initializr 1、Spring Initializr2、Spring Initializr模块 一、SpringBoot简介…...

双轴伺服电机驱动控制器AGV、AMR专用双伺服电机驱动控制器解决方案

工业机器人数控机床XY机械手双轴机器人堆垛机专用双轴伺服电机驱动控制器48V 14ARMS带有STO功能&#xff0c;隔离高压CAN/RS485/USB通讯支持编码器和霍尔输入 双伺服电机驱动控制器TMCM2611功能介绍 集成2个伺服电机的控制和驱动于一体供电电压48V&#xff0c;驱动电流14A RM…...

【VB语言】EXCEL中VB宏的应用

【VB语言】EXCEL中VB宏的应用 文章目录 [TOC](文章目录) 前言一、EXCEL-VB1.实验过程2.代码 二、EXCEL-VB 生成.c.h文件1.实验过程2.代码 四、参考资料总结 前言 1.WPS-VB扩展包 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、EXCEL-VB 1.实验过…...

Ubuntu添加桌面快捷方式

以idea为例 一. 背景 在ubuntu中&#xff0c;很多时候是自己解压的文件并没有桌面快捷方式&#xff0c;需要自己找到对应的目录的执行文件手动打开&#xff0c;很麻烦 而只需要在 /usr/share/applications 中创建自定义的desktop文件就能自动复制到桌面 二. 添加方法 创建desk…...

10G EPON光模块

一、10G EPON对称光模块 工作模式&#xff1a;上行突发接收、下行连续发射。 工作原理&#xff1a;当需要发送信号时&#xff0c;系统信号通过光模块的电接口把信号传送到驱动芯片&#xff0c;芯片处理后&#xff0c;驱动激光器发出调制光信号&#xff0c;经光纤发到远端&…...

Elasticsearch+Logstash+Kibana可视化集群部署

文章目录 1.组件介绍简述2.集群规划3.Es组件部署4.Logstash组件部署5.Kibana组件部署6.Kibana的基础使用 1.组件介绍简述 Elasticsearch&#xff1a;开源实时分布式搜索和分析引擎&#xff0c;支持大规模数据存储和高吞吐量&#xff0c;提供丰富的搜索功能和可扩展性。 Logsta…...

基于CanMV IDE 开发软件对K210图像识别模块的开发

简介 CanMV IDE 是一款专为 K210 芯片设计的图形识别 Python 软件&#xff0c;它提供了强大的功能&#xff0c;帮助开发者轻松实现基于 K210 芯片的图形识别应用。无论你是初学者还是经验丰富的开发者&#xff0c;CanMV IDE 都能为你提供便捷的开发环境和丰富的资源。 硬件资…...

win11系统 Docker Desktop提示Docker Engine stopped解决全过程记录

DockerDesktop安装指南以及Windows下WSL2和 Hyper-V相关问题追查 【已解决】win10系统 Docker 提示Docker Engine stopped解决全过程记录 本篇文章主要记录Docker Desktop安装和使用时出现的问题及解决方法&#xff0c;以及后续使用夜神模拟器&#xff0c;关闭了Hyper-V时&am…...

工作室如何实现一机一IP

对于工作室而言&#xff0c;多开游戏账号却是其运营模式的核心需求。他们通过大量囤积金币、资源&#xff0c;再将其变现来获取利润。在这种运营模式下&#xff0c;账号数量直接关系到工作室的收益&#xff0c;所以解决 IP 问题就成了手游工作室发展道路上的首要难题&#xff0…...

WEB安全--SQL注入--二次注入

一、原理&#xff1a; 二次注入的关键在于攻击者的输入并不立即执行&#xff0c;而是经过某些存储或处理后&#xff0c;在后续某个步骤中再触发注入攻击 二、示例&#xff1a; 2.1、sqli-labs-master/less-24&#xff1a; admin# 第一次在网页注册账号和密码时没有漏洞&#x…...

构建现代微服务安全体系:Spring Security、JWT 与 Spring Cloud Gateway 实践

构建现代微服务安全体系&#xff1a;Spring Security、JWT 与 Spring Cloud Gateway 实践 本文将基于提供的代码示例&#xff0c;详细介绍如何在一个Java微服务项目中使用Spring Security、JWT和Spring Cloud Gateway来构建一个高效且安全的微服务体系&#xff0c;并整合性能优…...

Spring Boot 动态数据源实操指南

在实际开发中&#xff0c;我们经常会遇到需要动态切换数据源的场景&#xff0c;比如多租户系统、读写分离、分库分表等。Spring Boot 提供了灵活的配置方式&#xff0c;结合 AbstractRoutingDataSource 可以轻松实现动态数据源切换。本文将带你一步步实现 Spring Boot 动态数据…...

HBase高级技巧:解锁更强大的数据处理能力

HBase高级技巧&#xff1a;解锁更强大的数据处理能力 嘿&#xff0c;小伙伴们&#xff01;在掌握了HBase的基本操作之后&#xff0c;今天我们将深入探讨一些HBase的高级技巧。这些技巧将帮助你在面对复杂的数据处理需求时更加得心应手&#xff0c;进一步提升系统的性能和可靠性…...

【进阶】JVM篇

为什么学习jvm 1、面试的需要 学过java的程序员对jvm应该不陌生&#xff0c;程序员为什么要学习jvm呢&#xff1f;其实不懂jvm也可以照样写出优质的代码&#xff0c;但是不懂jvm会被大厂的面试官虐的体无完肤。 2、高级程序员需要了解 jvm作用 jvm负责把编译后的字节码转换…...

DeepSeek官方推荐的AI集成系统

DeepSeek模型虽然强大先进&#xff0c;但是模型相当于大脑&#xff0c;再聪明的大脑如果没有输入输出以及执行工具也白搭&#xff0c;所以需要有配套工具才能让模型发挥最大的作用。下面是一个典型AI Agent架构图&#xff0c;包含核心组件与数据流转关系&#xff1a; #mermaid-…...

【动态规划篇】:当回文串遇上动态规划--如何用二维DP“折叠”字符串?

✨感谢您阅读本篇文章&#xff0c;文章内容是个人学习笔记的整理&#xff0c;如果哪里有误的话还请您指正噢✨ ✨ 个人主页&#xff1a;余辉zmh–CSDN博客 ✨ 文章所属专栏&#xff1a;动态规划篇–CSDN博客 文章目录 一.回文串类DP核心思想&#xff08;判断所有子串是否是回文…...

JENKINS(全面)

一.linux系统中JENKINS的安装 注意&#xff1a;安装jenkins需要安装jdk&#xff0c;而且具体版本的jenkins有相对应的jdk版本。可参考以下链接。 Redhat Jenkins 软件包https://pkg.jenkins.io/redhat-stable/https://pkg.jenkins.io/redhat-stable/https://pkg.jenkins.io/r…...

Promise详解大全:介绍、九个方法使用和区别、返回值详解

Promise的介绍 Promise是异步编程的一种解决方案&#xff0c;它的构造函数是同步执行的&#xff0c;then 方法是异步执行的&#xff0c;所以Promise创建后里面的函数会立即执行&#xff0c;构造函数中的resolve和reject只有第一次执行有效&#xff0c;&#xff0c;也就是说Pro…...

尚硅谷爬虫note004

一、urllib库 1. python自带&#xff0c;无需安装 # _*_ coding : utf-8 _*_ # Time : 2025/2/11 09:39 # Author : 20250206-里奥 # File : demo14_urllib # Project : PythonProject10-14#导入urllib.request import urllib.request#使用urllib获取百度首页源码 #1.定义一…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

门静脉高压——表现

一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构&#xff1a;由肠系膜上静脉和脾静脉汇合构成&#xff0c;是肝脏血液供应的主要来源。淤血后果&#xff1a;门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血&#xff0c;引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...