## 背景经常开发管理系统的小伙伴们肯定或多或少都遇到过表单需求，对于一个系统而言，动辄就是十几，几十个表单；如果每个表单都按照传统模式编写的话，简直要把前端累死，看着一段段大同小异的代码，也是提不上一点劲，甚至看着这些`它懂你，你不想懂它`的代码就犯恶心。本着偷懒的精神，我就想能否封装一个动态表单，`实现思路大致就是通过JSON配置，动态生成表单页面`，于是说干就干，咱玩的就是真实对吧。开撸，开撸..... ![wallhaven-2kx58m.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f78e8c6347248da8f7f0e84f226d5f2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920&h=1080&s=166923&e=jpg&b=e2c88b) 项目地址：[github地址](https://github.com/sunshine824/vue3.0-typescript-starter/tree/element/src/components/Form) ## 数据接口设计废话不多说，代码敬上 > `咋眼一看，代码有点多哈，别着急，注释已安排上。 ` ```js type TreeItem = { value: string label: string children?: TreeItem[] } export type FormListItem = { // 栅格占据的列数 colSpan?: number // 表单元素特有的属性 props?: { placeholder?: string defaultValue?: unknown // 绑定的默认值 clearable?: boolean disabled?: boolean | ((data: { [key: string]: any }) => boolean) size?: 'large' | 'default' | 'small' group?: unknown // 父级特有属性，针对嵌套组件 Select、Checkbox、Radio child?: unknown // 子级特有属性，针对嵌套组件 Select、Checkbox、Radio [key: string]: unknown } // 表单元素特有的插槽 slots?: { name: string content: unknown }[] // 组件类型 typeName?: 'input' | 'select' | 'date-picker' | 'time-picker' | 'switch' | 'checkbox' | 'checkbox-group' | 'checkbox-button' | 'radio-group' | 'radio-button' | 'input-number' | 'tree-select' | 'upload' | 'slider' // 表单元素特有的样式 styles?: { [key: string]: number | string } // select options 替换字段 replaceField?: { value: string; label: string } // 列表项 options?: { value?: string | number | boolean | object label?: string | number disabled?: ((data: { [key: string]: any }) => boolean) | boolean [key: string]: unknown }[] // 独有属性，同 FormItem Attributes formItem: Partial // 嵌套 children?: FormListItem[] // 树形选择器数据 treeData?: TreeItem[] // 只针对 'tree-select'组件 // 组件显示条件 isShow?: ((data: { [key: string]: any }) => boolean) | boolean } export type FConfig = { form: Partial> // Form Attributes 与Element属性一致 configs: FormListItem[] // 表单主体配置 } ``` ## 常见表单需求 - 如何控制某个组件的显示隐藏 > 实现思路，提供一个`isShow`方法，将方法绑定在对应的组件上，从而组件显示隐藏条件 ```js isShow: (data = {}) => { return model.value.region == 'shanghai' } .... ``` - 目标组件是否禁用，需要根据某个组件是否有值来判断 ```js disabled: (data = {}) => { return !model.value.date1 } .... ``` - 组件之间相互赋值，`A组件`的值赋值给`B组件`，`B组件`的值赋值给 `A组件` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0ad4465c5e54481bfddabe0789df0a8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1113&h=87&s=9599&e=png&b=f8f8f8) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f06c155e9f574ff3a00345cd0b1589dd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=682&h=1090&s=100411&e=png&b=1e1e1e) - 表单验证 ```js formItem: { prop: 'name', label: 'Activity name', rules: [ { required: true, message: 'Please enter content', trigger: 'blur' } ] } ``` ## 组件封装 #### 1. 输入框组件 ```js ``` #### 2. 下拉选择器组件 ```js ``` #### 3. 日期选择器组件 ```js ``` 封装方法都一致，还有很多组件，这里就不一个个列出来，具体大家就移步源码查看哈 > 项目路径 src/components/Form ## 组件整合 ```js ``` ## 抽离Form公共逻辑 ```js // hooks/useForm.ts import { ref } from 'vue' import type { FConfig } from '@/components/Form/form' import { cloneDeep } from 'lodash' type SelectOption = { value?: string | number | boolean | object label?: string | number disabled?: ((data: { [key: string]: any }) => boolean) | boolean [key: string]: unknown }[] type TreeItem = { value: string label: string children?: TreeItem[] } export const useForm = (formConfig: FConfig) => { const model = ref<{ [key: string]: any }>({}) const config = ref(formConfig) const getFormItem = (key: string) => { return config['value']?.configs.find((item) => item.formItem.prop == key) } /** * 修改select组件options * @param key 对应formItem prop * @param options 下拉选项 */ const changeSelectOptions = (key: string, options: SelectOption) => { const formItem = getFormItem(key) if (formItem) { formItem.options = options } } /** * 修改tree-select组件treeData * @param key 对应formItem prop * @param options 下拉选项 */ const changeTreeSelectOptions = (key: string, options: TreeItem[]) => { const formItem = getFormItem(key) if (formItem) { formItem.treeData = options } } // 构建model绑定数据 const initModel = () => { const configs = config['value']?.configs if (configs.length) { const m: { [key: string]: any } = {} configs.map((item) => { if (!item.children?.length) { m[item.formItem.prop as string] = item.props?.defaultValue } else { item.children.map((child) => { m[child.formItem.prop as string] = child.props?.defaultValue }) } }) model.value = cloneDeep(m) } } initModel() return { config, model, changeSelectOptions, changeTreeSelectOptions } } ``` ## 附上完整配置 ```js // views//dynamicForm/form.tsx import { ElIcon, ElButton } from 'element-plus' import { Search } from '@element-plus/icons-vue' import { useForm } from '@/hooks/useForm' export const useFormIterate = (events?: any) => { const { model, ...arg } = useForm({ form: { labelWidth: '140px' }, configs: [ // 输入框 { colSpan: 12, typeName: 'input', props: { defaultValue: '', clearable: true, placeholder: 'Please enter content' }, slots: [ { name: 'suffix', content: () => ( ) } ], formItem: { prop: 'name', label: 'Activity name', rules: [ { required: true, message: 'Please enter content', trigger: 'blur' } ] } }, // 选择器 { colSpan: 12, typeName: 'select', props: { placeholder: 'Please select content', defaultValue: undefined, group: { clearable: true, onChange: events.changeSelect }, child: {} }, replaceField: { value: 'key', label: 'title' }, options: [ { key: 'shanghai', title: 'Zone one' }, { key: 'beijing', title: 'Zone two' } ], styles: { width: '100%' }, formItem: { prop: 'region', label: 'Activity zone', rules: [ { required: true, message: 'Please select Activity zone', trigger: 'change' } ] } }, // 选择器 { colSpan: 24, typeName: 'select', props: { disabled: () => { return !model.value.region }, placeholder: 'Please select content', defaultValue: undefined, group: { clearable: true, onChange: events.changeSelect }, child: {} }, replaceField: { value: 'key', label: 'title' }, options: [], styles: { width: '100%' }, formItem: { prop: 'region1', label: 'Activity select zone', rules: [ { required: true, message: 'Please select Activity zone', trigger: 'change' } ] } }, { colSpan: 24, formItem: { required: true, label: 'Activity time' }, children: [ // 日期选择器 { colSpan: 12, typeName: 'date-picker', props: { type: 'datetime', clearable: true, valueFormat: 'YYYY-MM-DD HH:mm:ss', placeholder: 'Pick a day' }, styles: { width: '100%' }, formItem: { prop: 'date1', rules: [ { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' } ] } }, // 时间选择器 { colSpan: 12, typeName: 'time-picker', props: { disabled: (data = {}) => { return !model.value.date1 }, clearable: true, placeholder: 'Pick a time' }, styles: { width: '100%' }, formItem: { prop: 'date2', rules: [ { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' } ] } } ] }, // 开关 { colSpan: 24, typeName: 'switch', props: { defaultValue: false }, formItem: { prop: 'delivery', label: 'Instant delivery' } }, // 多选框 { colSpan: 12, typeName: 'checkbox-group', props: { group: {}, child: {} }, formItem: { prop: 'type', label: 'Activity type', rules: [ { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' } ] }, // replaceField: { value: 'value', label: 'label' }, options: [ { value: 'shanghai', label: 'Zone one' }, { value: 'beijing', label: 'Zone two' } ] }, // 多选按钮框 { colSpan: 12, typeName: 'checkbox-button', props: { group: {}, child: {} }, formItem: { prop: 'button', label: 'Activity button', rules: [ { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' } ] }, // replaceField: { value: 'value', label: 'label' }, options: [ { value: 'shanghai', label: 'Zone one' }, { value: 'beijing', label: 'Zone two' } ] }, // 单选框 { colSpan: 12, typeName: 'radio-group', props: {}, formItem: { prop: 'resource', label: 'Resources', rules: [ { required: true, message: 'Please select activity resource', trigger: 'change' } ] }, options: [ { value: 'shanghai', label: 'Sponsorship' }, { value: 'beijing', label: 'Venue' } ] }, // 单选按钮框 { colSpan: 12, typeName: 'radio-button', props: {}, formItem: { prop: 'resourceButton', label: 'Resources button', rules: [ { required: true, message: 'Please select activity resource', trigger: 'change' } ] }, options: [ { value: 'shanghai', label: 'Sponsorship' }, { value: 'beijing', label: 'Venue' } ] }, // 文本域 { colSpan: 24, typeName: 'input', formItem: { prop: 'desc', label: 'Activity form' }, props: { rows: 5, type: 'textarea', clearable: true, placeholder: 'Please enter content' }, isShow: (data = {}) => { return model.value.region == 'shanghai' } }, // 文件上传 { colSpan: 24, typeName: 'upload', formItem: { prop: 'fileName', label: 'Upload File', rules: [ { required: true, message: 'Please select at least one activity type', trigger: 'change' } ] }, props: { httpRequest: events.httpRequest }, slots: [ { name: 'default', content: () => 上传 }, { name: 'tip', content: () => jpg/png files with a size less than 500KB } ] }, // 滑块 { colSpan: 16, typeName: 'slider', props: { onChange: (val: number) => { model.value.number = val } }, formItem: { label: 'Activity slider', prop: 'slider', rules: [ { required: true, message: 'Please enter content', trigger: 'change' } ] } }, // 数字输入框 { colSpan: 8, typeName: 'input-number', formItem: { prop: 'number', label: 'Activity number' }, props: { min: 1, max: 100, onChange: (val: number) => { model.value.slider = val } } }, // 树形选择器 { colSpan: 24, typeName: 'tree-select', formItem: { prop: 'tree', label: 'Activity tree' }, styles: { width: '100%' }, props: { multiple: true, showCheckbox: true, placeholder: 'Please select content' }, treeData: [] } ] }) return { model, ...arg} } ``` 到这里可能会有朋友会问，为啥用的tsx后缀，而不是用js/json; 这是因为想通过组件的形式传到Slot中（m-input组件为例），从而进行展示，当然也欢迎大家在评论区提供更好的方案。 ## 实现效果 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a8e09d8a23f94af187e2f231c2d3f06e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1362&h=618&s=71922&e=png&b=fafafa) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e57c2e19725434a9115c7b82fd122fe~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1346&h=628&s=90724&e=png&b=fafafa) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/448c75b2ed6c40beb8e664da7a64c942~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1353&h=668&s=79020&e=png&b=fafafa) 详细的实现逻辑，就委屈大家移步到[项目](https://github.com/sunshine824/vue3.0-typescript-starter/tree/element)中查看了。 ## 文章推荐 [Vue3 折叠面板组件实现](https://juejin.cn/post/7316171289096486946) [Vue3 + Vite 搭建企业级开发脚手架【目录篇】](https://juejin.cn/post/7068199676775759903) [Vue3 + Vite 搭建企业级开发脚手架【配置篇】](https://juejin.cn/post/7308371444370472960) ## 最后文章暂时就写到这，如果本文对您有什么帮助，别忘了动动手指点个赞❤️。本文如果有错误和不足之处，欢迎大家在评论区指出，多多提出您宝贵的意见！最后分享项目地址：[github地址](https://github.com/sunshine824/vue3.0-typescript-starter/tree/element/src/components/Form)