【原创】解决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想要做一个系统定时任务功能,可以选择不同的定时任务类型,比如使用cron表达式、周期执行、指定时间执行等。每种类型对应不同的输入框,需要动态显隐输入框才行,但是这个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功能,隔离高压CAN/RS485/USB通讯支持编码器和霍尔输入 双伺服电机驱动控制器TMCM2611功能介绍 集成2个伺服电机的控制和驱动于一体供电电压48V,驱动电流14A RM…...
【VB语言】EXCEL中VB宏的应用
【VB语言】EXCEL中VB宏的应用 文章目录 [TOC](文章目录) 前言一、EXCEL-VB1.实验过程2.代码 二、EXCEL-VB 生成.c.h文件1.实验过程2.代码 四、参考资料总结 前言 1.WPS-VB扩展包 提示:以下是本篇文章正文内容,下面案例可供参考 一、EXCEL-VB 1.实验过…...
Ubuntu添加桌面快捷方式
以idea为例 一. 背景 在ubuntu中,很多时候是自己解压的文件并没有桌面快捷方式,需要自己找到对应的目录的执行文件手动打开,很麻烦 而只需要在 /usr/share/applications 中创建自定义的desktop文件就能自动复制到桌面 二. 添加方法 创建desk…...
10G EPON光模块
一、10G EPON对称光模块 工作模式:上行突发接收、下行连续发射。 工作原理:当需要发送信号时,系统信号通过光模块的电接口把信号传送到驱动芯片,芯片处理后,驱动激光器发出调制光信号,经光纤发到远端&…...
Elasticsearch+Logstash+Kibana可视化集群部署
文章目录 1.组件介绍简述2.集群规划3.Es组件部署4.Logstash组件部署5.Kibana组件部署6.Kibana的基础使用 1.组件介绍简述 Elasticsearch:开源实时分布式搜索和分析引擎,支持大规模数据存储和高吞吐量,提供丰富的搜索功能和可扩展性。 Logsta…...
基于CanMV IDE 开发软件对K210图像识别模块的开发
简介 CanMV IDE 是一款专为 K210 芯片设计的图形识别 Python 软件,它提供了强大的功能,帮助开发者轻松实现基于 K210 芯片的图形识别应用。无论你是初学者还是经验丰富的开发者,CanMV IDE 都能为你提供便捷的开发环境和丰富的资源。 硬件资…...
win11系统 Docker Desktop提示Docker Engine stopped解决全过程记录
DockerDesktop安装指南以及Windows下WSL2和 Hyper-V相关问题追查 【已解决】win10系统 Docker 提示Docker Engine stopped解决全过程记录 本篇文章主要记录Docker Desktop安装和使用时出现的问题及解决方法,以及后续使用夜神模拟器,关闭了Hyper-V时&am…...
工作室如何实现一机一IP
对于工作室而言,多开游戏账号却是其运营模式的核心需求。他们通过大量囤积金币、资源,再将其变现来获取利润。在这种运营模式下,账号数量直接关系到工作室的收益,所以解决 IP 问题就成了手游工作室发展道路上的首要难题࿰…...
WEB安全--SQL注入--二次注入
一、原理: 二次注入的关键在于攻击者的输入并不立即执行,而是经过某些存储或处理后,在后续某个步骤中再触发注入攻击 二、示例: 2.1、sqli-labs-master/less-24: admin# 第一次在网页注册账号和密码时没有漏洞&#x…...
构建现代微服务安全体系:Spring Security、JWT 与 Spring Cloud Gateway 实践
构建现代微服务安全体系:Spring Security、JWT 与 Spring Cloud Gateway 实践 本文将基于提供的代码示例,详细介绍如何在一个Java微服务项目中使用Spring Security、JWT和Spring Cloud Gateway来构建一个高效且安全的微服务体系,并整合性能优…...
Spring Boot 动态数据源实操指南
在实际开发中,我们经常会遇到需要动态切换数据源的场景,比如多租户系统、读写分离、分库分表等。Spring Boot 提供了灵活的配置方式,结合 AbstractRoutingDataSource 可以轻松实现动态数据源切换。本文将带你一步步实现 Spring Boot 动态数据…...
HBase高级技巧:解锁更强大的数据处理能力
HBase高级技巧:解锁更强大的数据处理能力 嘿,小伙伴们!在掌握了HBase的基本操作之后,今天我们将深入探讨一些HBase的高级技巧。这些技巧将帮助你在面对复杂的数据处理需求时更加得心应手,进一步提升系统的性能和可靠性…...
【进阶】JVM篇
为什么学习jvm 1、面试的需要 学过java的程序员对jvm应该不陌生,程序员为什么要学习jvm呢?其实不懂jvm也可以照样写出优质的代码,但是不懂jvm会被大厂的面试官虐的体无完肤。 2、高级程序员需要了解 jvm作用 jvm负责把编译后的字节码转换…...
DeepSeek官方推荐的AI集成系统
DeepSeek模型虽然强大先进,但是模型相当于大脑,再聪明的大脑如果没有输入输出以及执行工具也白搭,所以需要有配套工具才能让模型发挥最大的作用。下面是一个典型AI Agent架构图,包含核心组件与数据流转关系: #mermaid-…...
【动态规划篇】:当回文串遇上动态规划--如何用二维DP“折叠”字符串?
✨感谢您阅读本篇文章,文章内容是个人学习笔记的整理,如果哪里有误的话还请您指正噢✨ ✨ 个人主页:余辉zmh–CSDN博客 ✨ 文章所属专栏:动态规划篇–CSDN博客 文章目录 一.回文串类DP核心思想(判断所有子串是否是回文…...
JENKINS(全面)
一.linux系统中JENKINS的安装 注意:安装jenkins需要安装jdk,而且具体版本的jenkins有相对应的jdk版本。可参考以下链接。 Redhat Jenkins 软件包https://pkg.jenkins.io/redhat-stable/https://pkg.jenkins.io/redhat-stable/https://pkg.jenkins.io/r…...
Promise详解大全:介绍、九个方法使用和区别、返回值详解
Promise的介绍 Promise是异步编程的一种解决方案,它的构造函数是同步执行的,then 方法是异步执行的,所以Promise创建后里面的函数会立即执行,构造函数中的resolve和reject只有第一次执行有效,,也就是说Pro…...
尚硅谷爬虫note004
一、urllib库 1. python自带,无需安装 # _*_ coding : utf-8 _*_ # Time : 2025/2/11 09:39 # Author : 20250206-里奥 # File : demo14_urllib # Project : PythonProject10-14#导入urllib.request import urllib.request#使用urllib获取百度首页源码 #1.定义一…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
多模态2025:技术路线“神仙打架”,视频生成冲上云霄
文|魏琳华 编|王一粟 一场大会,聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中,汇集了学界、创业公司和大厂等三方的热门选手,关于多模态的集中讨论达到了前所未有的热度。其中,…...
visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中,选择 环境 -> 常规 ,将其中的颜色主题改成深色 点击确定,更改完成...
HTML 列表、表格、表单
1 列表标签 作用:布局内容排列整齐的区域 列表分类:无序列表、有序列表、定义列表。 例如: 1.1 无序列表 标签:ul 嵌套 li,ul是无序列表,li是列表条目。 注意事项: ul 标签里面只能包裹 li…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践
6月5日,2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席,并作《智能体在安全领域的应用实践》主题演讲,分享了在智能体在安全领域的突破性实践。他指出,百度通过将安全能力…...
C++ 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
