网站域名费用怎么做帐,网站维护的主要内容,网站地图提交入口,网站优化设计方案前言
目前使用vue-element-plus-admin想要做一个系统定时任务功能#xff0c;可以选择不同的定时任务类型#xff0c;比如使用cron表达式、周期执行、指定时间执行等。每种类型对应不同的输入框#xff0c;需要动态显隐输入框才行#xff0c;但是这个vue-element-plus-adm…前言
目前使用vue-element-plus-admin想要做一个系统定时任务功能可以选择不同的定时任务类型比如使用cron表达式、周期执行、指定时间执行等。每种类型对应不同的输入框需要动态显隐输入框才行但是这个vue-element-plus-admin很顽固啊表单貌似初始化后就改不了了作为一名Java后端工程师只能拼命钻研这个框架了最终也是解决了这个问题。 GitHub上也有人在项目里问同样的问题作者也没给回复那只能我自己来了
前端页面选择不同循环类型显示不同的输入框 获取当前的formData
既然下拉框改了那我form中的数据肯定发生了变化那我将这个数据通过下拉选的onChange方法重新获取一下不就行了
定义formDataRef并在下拉选改变时重新获取
const formDataRef ref(getFormData())const schema reactiveFormSchema[]([{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对于用户比较复杂的需求有点难以招架就这么一个较为简单的需求我这个后端程序猿就搞了好久好在还是解决了
