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

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

article 2025/2/25 9:28:19

前言

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