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

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

news 2025/8/23 20:54:57

前言

目前使用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才能显示出这个输入框。