新手学做网站书,大型网站建设需要,网站图片加载优化,网站 开发代码资源在这儿 ↑ vue之动态表单优化 vue2js动态表单优化vue3ts动态表单优化 vue2js动态表单优化
效果图
目录结构 五个文件的完整代码:
以下是App.vue
templatedivrouter-view/router-viewFormpage //div
/templa…代码资源在这儿 ↑ vue之动态表单优化 vue2js动态表单优化vue3ts动态表单优化 vue2js动态表单优化
效果图
目录结构 五个文件的完整代码:
以下是App.vue
templatedivrouter-view/router-viewFormpage //div
/templatescript
import Formpage from ./views/FormPage.vue;export default {components: {Formpage},
}
/script
以下是FormPage.vue
templatediv classcontainerFormItemComp :formStateroot/FormItemComp/div
/templatescript
import FormItemComp from ../components/FormItemComp.vue;
import root from ./FormPageDatas;export default {components: {FormItemComp},data() {return {root: root}}
}
/scriptstyle scoped
.container {width: 80%;margin: 1em auto;
}
/style
以下是FormItemComp.vue
templateel-formtemplate v-ifformStateel-form-item :labelformState.payload.labeltemplate v-ifformState.type inputel-input v-modelformState.payload.value//templatetemplate v-else-ifformState.type checkboxel-checkbox-group v-modelformState.payload.valueel-checkbox v-foroption in formState.payload.options :keyoption.value :labeloption.value{{ option.label }}/el-checkbox/el-checkbox-group/templatetemplate v-else-ifformState.type radioel-radio-group v-modelformState.payload.valueel-radio v-foroption in formState.payload.options :keyoption.value :labeloption.value{{ option.label }}/el-radio/el-radio-group/templatetemplate v-else-ifformState.type selectel-select v-modelformState.payload.valueel-option v-foroption in formState.payload.options :keyoption.value :labeloption.label :valueoption.value//el-select/template/el-form-itemFormItemComp :form-stategetNext()//template/el-form
/templatescript
export default {name: FormItemComp,props: {formState: {type: Object,default: null}},methods: {getNext() {let current this.formState;if (!current) {return null;}const ancestors [];ancestors.unshift(current);while ((current current.parent)) {ancestors.unshift(current);}return this.formState.next(this.formState, ancestors);}}
}
/scriptstyle scoped
.el-form-item__label {padding-right: 10px !important;
}
/style
以下是FormItem.js
import Vue from vue;/*** 创建表单项* param formItemType string 表单项的类型* param payload object 表单项的label、options、value* param next function 当前选择的值* param parent 上一个表当项* return {{next: ((function(*, *): (null|null))|*), parent: null, payload, type}}*/
export function createFormItem(formItemType, payload, next, parent) {if (!next) {next () null;}if (!parent) {parent null;}const nextFunc function(current, acients) {let nextItem next(current, acients);if (!nextItem) {return null;}nextItem.parent current;if (!Vue.observable(nextItem)) {nextItem Vue.observable(nextItem);}return nextItem;};return Vue.observable({type: formItemType,payload: payload,next: nextFunc,parent: parent,});
}
以下是FormPageDatas.js
import {createFormItem} from /FormItem;const item1 createFormItem(select,{label: test1,options: [{label: test1-1, value: test1-1},{label: test1-2, value: test1-2},{label: test1-3, value: test1-3},],value: test1-1,},(current) {if (current.payload.value test1-2) {return item2;} else if (current.payload.value test1-3) {return item4;} else {return null;}}
);const item2 createFormItem(input, {label: test2,value: test
}, (current) (current.payload.value test2 ? item3 : null));const item3 createFormItem(checkbox,{label: test3,options: [{label: test3-1, value: test3-1},{label: test3-2, value: test3-2},{label: test3-3, value: test3-3},],value: [test3-2, test3-3],},(current) (current.payload.value.includes(test3-1) ? item4 : null)
);const item4 createFormItem(radio, {label: test4,options: [{label: test4-1, value: test4-1},{label: test4-2, value: test4-2},{label: test4-3, value: test4-3},{label: test4-4, value: test4-4},],value: test4-4,
});export default item1;
vue3ts动态表单优化
效果图
目录结构
五个文件的完整代码:
以下是App.vue
templatedivFormpage //div
/templatescript setup langts
import Formpage from ./views/Formpage.vue;
/script
以下是FormPage.vue
templatediv classcontainerFormItemComp :form-stateroot/FormItemComp/div
/templatescript setup langts
import FormItemComp from ../components/FormItemComp.vue;
import root from ./FormPageDatas;
/scriptstyle scoped
.container {width: 80%;margin: 1em auto;
}
/style
以下是FormItemComp.vue
templatetemplate v-ifformStatea-form-item :labelformState.payload.labeltemplate v-ifformState.type inputa-input v-model:valueformState.payload.value //templatetemplate v-else-ifformState.type checkboxa-checkbox-group v-model:valueformState.payload.valuea-checkbox v-foroption in formState.payload.options :valueoption.value{{ option.label }}/a-checkbox/a-checkbox-group/templatetemplate v-else-ifformState.type radioa-radio-group v-model:valueformState.payload.valuea-radio v-foroption in formState.payload.options :valueoption.value{{ option.label }}/a-radio/a-radio-group/templatetemplate v-else-ifformState.type selecta-select v-model:valueformState.payload.valuea-select-option v-foroption in formState.payload.options :valueoption.value{{ option.label }}/a-select-option/a-select/template/a-form-itemFormItemComp :form-stategetNext()/FormItemComp/template
/templatescript setup langts
import { FormItem } from ../FormItem;const props defineProps{formState: FormItem | null;
}();function getNext(): FormItem | null {let current: FormItem | null props.formState;if (!current) {return null;}const acients [];acients.unshift(current);while ((current current.parent)) {acients.unshift(current);}return props.formState!.next(props.formState!, acients);
}
/scriptstyle
.ant-form-item-label {padding-right: 10px !important;
}
/style
以下是FormItem.ts
import { isReactive, reactive } from vue;export type FormItemType input | select | checkbox | radio;export interface FormItem {type: FormItemType;payload: any;next: (current: FormItem, acients: FormItem[]) FormItem | null;parent: FormItem | null;
}export function createFormItem(formItemType: FormItem[type],payload: FormItem[payload],next?: FormItem[next],parent?: FormItem[parent]
): FormItem {if (!next) {next () null;}if (!parent) {parent null;}const nextFunc: FormItem[next] (current, acients) {let nextItem next!(current, acients);if (!nextItem) {return null;}nextItem.parent current;if (!isReactive(nextItem)) {nextItem reactive(nextItem);}return nextItem;};const formItem: FormItem reactive({type: formItemType,payload,next: nextFunc,parent,});return formItem;
}
以下是FormPageDatas.ts
import { createFormItem } from ../FormItem;const item1 createFormItem(select,{label: test1,options: [{ label: test1-1, value: test1-1 },{ label: test1-2, value: test1-2 },{ label: test1-3, value: test1-3 },],value: test1-1,},(current) {if (current.payload.value test1-2) {return item2;} else if (current.payload.value test1-3) {return item4;} else {return null;}}
);const item2 createFormItem(input,{ label: test2, value: test },(current) (current.payload.value test2 ? item3 : null)
);const item3 createFormItem(checkbox,{label: test3,options: [{ label: test3-1, value: test3-1 },{ label: test3-2, value: test3-2 },{ label: test3-3, value: test3-3 },],value: [test3-2, test3-3],},(current) (current.payload.value.includes(test3-1) ? item4 : null)
);const item4 createFormItem(radio, {label: test4,options: [{ label: test4-1, value: test4-1 },{ label: test4-2, value: test4-2 },{ label: test4-3, value: test4-3 },{ label: test4-4, value: test4-4 },],value: test4-4,
});export default item1;
