前言

目前使用vue-element-plus-admin想要做一個(gè)系統(tǒng)定時(shí)任務(wù)功能，可以選擇不同的定時(shí)任務(wù)類(lèi)型，比如使用cron表達(dá)式、周期執(zhí)行、指定時(shí)間執(zhí)行等。每種類(lèi)型對(duì)應(yīng)不同的輸入框，需要?jiǎng)討B(tài)顯隱輸入框才行，但是這個(gè)vue-element-plus-admin很頑固啊，表單貌似初始化后就改不了了，作為一名Java后端工程師只能拼命鉆研這個(gè)框架了，最終也是解決了這個(gè)問(wèn)題。

?GitHub上也有人在項(xiàng)目里問(wèn)同樣的問(wèn)題，作者也沒(méi)給回復(fù)，那只能我自己來(lái)了

前端頁(yè)面：選擇不同循環(huán)類(lèi)型顯示不同的輸入框

獲取當(dāng)前的formData

既然下拉框改了，那我form中的數(shù)據(jù)肯定發(fā)生了變化，那我將這個(gè)數(shù)據(jù)通過(guò)下拉選的onChange方法重新獲取一下不就行了

定義formDataRef，并在下拉選改變時(shí)重新獲取

const formDataRef = ref(getFormData())const schema = reactive<FormSchema[]>([{field: 'cycleType',label: '循環(huán)類(lèi)型',component: 'Select',componentProps: {placeholder: '請(qǐng)選擇循環(huán)類(lèi)型',clearable: true,options: [{label: '指定時(shí)間',value: 10},{label: '循環(huán)執(zhí)行',value: 20},{label: 'cron表達(dá)式',value: 30}],onChange: (value: number) => {formDataRef.value = getFormData()}}}
])

?其中g(shù)etFormData()是useForm()中formMethods中的方法

監(jiān)聽(tīng)formDataRef的變化

目前這個(gè)formDataRef是套了幾層的東西，沒(méi)法直接用，我這邊又定義了一個(gè)realFormData，用于解包一層formDataRef

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

將監(jiān)聽(tīng)到新的formDataRef的值賦值給realFormData，這樣終于算是可以直接用了，后面不管有多少個(gè)下拉框，直接用realFormData比較就行了。

輸入框動(dòng)態(tài)計(jì)算是否隱藏

最后就是顯隱輸入框了，這里采用動(dòng)態(tài)計(jì)算remove的值來(lái)達(dá)成這個(gè)功能

  {field: 'cron',label: 'cron表達(dá)式',component: 'Input',componentProps: {placeholder: '請(qǐng)輸入cron表達(dá)式',clearable: true},remove: computed(() => {return realFormData.value.cycleType !== 30})}

例如上面的cron表達(dá)式輸入框，我通過(guò)computed計(jì)算屬性來(lái)判斷這個(gè)輸入框是否顯示，目前只有cycleType為30才能顯示出這個(gè)輸入框。

實(shí)現(xiàn)效果

結(jié)語(yǔ)

這個(gè)vue-element-plus-admin對(duì)于用戶(hù)比較復(fù)雜的需求有點(diǎn)難以招架，就這么一個(gè)較為簡(jiǎn)單的需求我這個(gè)后端程序猿就搞了好久，好在還是解決了