wip(VForm): VForm component development

package.json

@@ -39,6 +39,7 @@
     "@commitlint/config-conventional": "^15.0.0",
     "@iconify/json": "^1.1.441",
     "@intlify/vite-plugin-vue-i18n": "^3.2.1",
+    "@types/lodash-es": "^4.17.5",
     "@types/node": "^16.11.12",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",

pnpm-lock.yaml

@@ -5,6 +5,7 @@ specifiers:
   '@commitlint/config-conventional': ^15.0.0
   '@iconify/json': ^1.1.441
   '@intlify/vite-plugin-vue-i18n': ^3.2.1
+  '@types/lodash-es': ^4.17.5
   '@types/node': ^16.11.12
   '@typescript-eslint/eslint-plugin': ^5.6.0
   '@typescript-eslint/parser': ^5.6.0
@@ -24,7 +25,6 @@ specifiers:
   less: ^4.1.2
   lint-staged: ^12.1.2
   lodash-es: ^4.17.21
-  normalize.css: ^8.0.1
   pinia: ^2.0.6
   postcss: ^8.4.4
   postcss-html: ^1.3.0
@@ -55,7 +55,6 @@ dependencies:
   '@vueuse/core': registry.npmmirror.com/@vueuse/core/7.1.2_vue@3.2.24
   element-plus: registry.npmmirror.com/element-plus/1.2.0-beta.6_vue@3.2.24
   lodash-es: registry.nlark.com/lodash-es/4.17.21
-  normalize.css: registry.nlark.com/normalize.css/8.0.1
   pinia: registry.npmmirror.com/pinia/2.0.6_typescript@4.5.2+vue@3.2.24
   vue: registry.npmmirror.com/vue/3.2.24
   vue-i18n: registry.npmmirror.com/vue-i18n/9.1.9_vue@3.2.24
@@ -67,6 +66,7 @@ devDependencies:
   '@commitlint/config-conventional': registry.npmmirror.com/@commitlint/config-conventional/15.0.0
   '@iconify/json': registry.npmmirror.com/@iconify/json/1.1.441
   '@intlify/vite-plugin-vue-i18n': registry.npmmirror.com/@intlify/vite-plugin-vue-i18n/3.2.1_vite@2.6.14+vue-i18n@9.1.9
+  '@types/lodash-es': registry.npmmirror.com/@types/lodash-es/4.17.5
   '@types/node': registry.npmmirror.com/@types/node/16.11.12
   '@typescript-eslint/eslint-plugin': registry.npmmirror.com/@typescript-eslint/eslint-plugin/5.6.0_16d83f5c41c3abb1061a82b07c18e4f3
   '@typescript-eslint/parser': registry.npmmirror.com/@typescript-eslint/parser/5.6.0_eslint@8.4.1+typescript@4.5.2
@@ -3349,17 +3349,6 @@ packages:
     version: 0.2.0
     dev: true
 
-  registry.nlark.com/normalize.css/8.0.1:
-    resolution:
-      {
-        integrity: sha1-m5iiCHOLnMJjTKrLxC0THJdIe/M=,
-        registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.nlark.com/normalize.css/download/normalize.css-8.0.1.tgz
-      }
-    name: normalize.css
-    version: 8.0.1
-    dev: false
-
   registry.nlark.com/nth-check/2.0.1:
     resolution:
       {
@@ -4335,7 +4324,7 @@ packages:
       {
         integrity: sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=,
         registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.nlark.com/semver/download/semver-5.7.1.tgz
+        tarball: https://registry.nlark.com/semver/download/semver-5.7.1.tgz?cache=0&sync_timestamp=1631500167672&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsemver%2Fdownload%2Fsemver-5.7.1.tgz
       }
     name: semver
     version: 5.7.1
@@ -4347,7 +4336,7 @@ packages:
       {
         integrity: sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=,
         registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.nlark.com/semver/download/semver-6.3.0.tgz
+        tarball: https://registry.nlark.com/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1631500167672&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz
       }
     name: semver
     version: 6.3.0
@@ -6119,16 +6108,16 @@ packages:
       '@iconify/types': registry.npmmirror.com/@iconify/types/1.0.12
     dev: true
 
-  registry.npmmirror.com/@intlify/bundle-utils/2.1.0_vue-i18n@9.1.9:
+  registry.npmmirror.com/@intlify/bundle-utils/2.2.0_vue-i18n@9.1.9:
     resolution:
       {
-        integrity: sha512-ogvmAjbSq0su4ijQbwqRfb0yimizZSK+HHV0SF3XCHSCtL+PDdRIDkkeNpNdPxNmdahORHXknC06Umehz4nTnQ==,
+        integrity: sha512-qVuN7+c84UB6rlLHSued2J9R86LG1rHg6ZibCghGMyPXnW0nOuIfkUFf1F7tXIqfMXjIPeJzlbpmzjWTI2z9Kw==,
         registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.npmmirror.com/@intlify/bundle-utils/download/@intlify/bundle-utils-2.1.0.tgz
+        tarball: https://registry.npmmirror.com/@intlify/bundle-utils/download/@intlify/bundle-utils-2.2.0.tgz
       }
-    id: registry.npmmirror.com/@intlify/bundle-utils/2.1.0
+    id: registry.npmmirror.com/@intlify/bundle-utils/2.2.0
     name: '@intlify/bundle-utils'
-    version: 2.1.0
+    version: 2.2.0
     engines: { node: '>= 12' }
     peerDependencies:
       petite-vue-i18n: '*'
@@ -6284,7 +6273,7 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/bundle-utils': registry.npmmirror.com/@intlify/bundle-utils/2.1.0_vue-i18n@9.1.9
+      '@intlify/bundle-utils': registry.npmmirror.com/@intlify/bundle-utils/2.2.0_vue-i18n@9.1.9
       '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.23
       '@rollup/pluginutils': registry.nlark.com/@rollup/pluginutils/4.1.1
       debug: registry.npmmirror.com/debug/4.3.3
@@ -6345,6 +6334,30 @@ packages:
     version: 7.0.9
     dev: true
 
+  registry.npmmirror.com/@types/lodash-es/4.17.5:
+    resolution:
+      {
+        integrity: sha1-HD/dFoSdhK6kOJCxxg2jeftQE1M=,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/@types/lodash-es/download/@types/lodash-es-4.17.5.tgz
+      }
+    name: '@types/lodash-es'
+    version: 4.17.5
+    dependencies:
+      '@types/lodash': registry.npmmirror.com/@types/lodash/4.14.178
+    dev: true
+
+  registry.npmmirror.com/@types/lodash/4.14.178:
+    resolution:
+      {
+        integrity: sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/@types/lodash/download/@types/lodash-4.14.178.tgz
+      }
+    name: '@types/lodash'
+    version: 4.14.178
+    dev: true
+
   registry.npmmirror.com/@types/minimatch/3.0.5:
     resolution:
       {
@@ -6974,7 +6987,7 @@ packages:
       {
         integrity: sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=,
         registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.npmmirror.com/acorn/download/acorn-7.4.1.tgz?cache=0&sync_timestamp=1637225943828&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Facorn%2Fdownload%2Facorn-7.4.1.tgz
+        tarball: https://registry.npmmirror.com/acorn/download/acorn-7.4.1.tgz
       }
     name: acorn
     version: 7.4.1
@@ -6987,7 +7000,7 @@ packages:
       {
         integrity: sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==,
         registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.npmmirror.com/acorn/download/acorn-8.6.0.tgz?cache=0&sync_timestamp=1637225943828&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Facorn%2Fdownload%2Facorn-8.6.0.tgz
+        tarball: https://registry.npmmirror.com/acorn/download/acorn-8.6.0.tgz
       }
     name: acorn
     version: 8.6.0
@@ -7925,7 +7938,7 @@ packages:
       {
         integrity: sha1-MOvR73wv3/AcOk8VEESvJfqwUj4=,
         registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.npmmirror.com/eslint-visitor-keys/download/eslint-visitor-keys-1.3.0.tgz?cache=0&sync_timestamp=1636378941796&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Feslint-visitor-keys%2Fdownload%2Feslint-visitor-keys-1.3.0.tgz
+        tarball: https://registry.npmmirror.com/eslint-visitor-keys/download/eslint-visitor-keys-1.3.0.tgz
       }
     name: eslint-visitor-keys
     version: 1.3.0
@@ -7937,7 +7950,7 @@ packages:
       {
         integrity: sha1-9lMoJZMFknOSyTjtROsKXJsr0wM=,
         registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.npmmirror.com/eslint-visitor-keys/download/eslint-visitor-keys-2.1.0.tgz?cache=0&sync_timestamp=1636378941796&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Feslint-visitor-keys%2Fdownload%2Feslint-visitor-keys-2.1.0.tgz
+        tarball: https://registry.npmmirror.com/eslint-visitor-keys/download/eslint-visitor-keys-2.1.0.tgz
       }
     name: eslint-visitor-keys
     version: 2.1.0

src/App.vue

@@ -5,6 +5,11 @@ import zhCn from 'element-plus/lib/locale/lang/zh-cn'
 // import en from 'element-plus/lib/locale/lang/en'
 import { VFrom } from '@/components/Form'
 import Calendar from '~icons/ep/calendar'
+import Check from '~icons/ep/check'
+import Close from '~icons/ep/close'
+import ChatRound from '~icons/ep/chatRound'
+import ChatLineRound from '~icons/ep/chatLineRound'
+import ChatDotRound from '~icons/ep/chatDotRound'
 import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()
 
@@ -60,6 +65,257 @@ const options2 = ref<FormOptions[]>(
   })
 )
 
+const options3: FormOptions[] = [
+  {
+    value: 'guide',
+    label: 'Guide',
+    children: [
+      {
+        value: 'disciplines',
+        label: 'Disciplines',
+        children: [
+          {
+            value: 'consistency',
+            label: 'Consistency'
+          },
+          {
+            value: 'feedback',
+            label: 'Feedback'
+          },
+          {
+            value: 'efficiency',
+            label: 'Efficiency'
+          },
+          {
+            value: 'controllability',
+            label: 'Controllability'
+          }
+        ]
+      },
+      {
+        value: 'navigation',
+        label: 'Navigation',
+        children: [
+          {
+            value: 'side nav',
+            label: 'Side Navigation'
+          },
+          {
+            value: 'top nav',
+            label: 'Top Navigation'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: 'component',
+    label: 'Component',
+    children: [
+      {
+        value: 'basic',
+        label: 'Basic',
+        children: [
+          {
+            value: 'layout',
+            label: 'Layout'
+          },
+          {
+            value: 'color',
+            label: 'Color'
+          },
+          {
+            value: 'typography',
+            label: 'Typography'
+          },
+          {
+            value: 'icon',
+            label: 'Icon'
+          },
+          {
+            value: 'button',
+            label: 'Button'
+          }
+        ]
+      },
+      {
+        value: 'form',
+        label: 'Form',
+        children: [
+          {
+            value: 'radio',
+            label: 'Radio'
+          },
+          {
+            value: 'checkbox',
+            label: 'Checkbox'
+          },
+          {
+            value: 'input',
+            label: 'Input'
+          },
+          {
+            value: 'input-number',
+            label: 'InputNumber'
+          },
+          {
+            value: 'select',
+            label: 'Select'
+          },
+          {
+            value: 'cascader',
+            label: 'Cascader'
+          },
+          {
+            value: 'switch',
+            label: 'Switch'
+          },
+          {
+            value: 'slider',
+            label: 'Slider'
+          },
+          {
+            value: 'time-picker',
+            label: 'TimePicker'
+          },
+          {
+            value: 'date-picker',
+            label: 'DatePicker'
+          },
+          {
+            value: 'datetime-picker',
+            label: 'DateTimePicker'
+          },
+          {
+            value: 'upload',
+            label: 'Upload'
+          },
+          {
+            value: 'rate',
+            label: 'Rate'
+          },
+          {
+            value: 'form',
+            label: 'Form'
+          }
+        ]
+      },
+      {
+        value: 'data',
+        label: 'Data',
+        children: [
+          {
+            value: 'table',
+            label: 'Table'
+          },
+          {
+            value: 'tag',
+            label: 'Tag'
+          },
+          {
+            value: 'progress',
+            label: 'Progress'
+          },
+          {
+            value: 'tree',
+            label: 'Tree'
+          },
+          {
+            value: 'pagination',
+            label: 'Pagination'
+          },
+          {
+            value: 'badge',
+            label: 'Badge'
+          }
+        ]
+      },
+      {
+        value: 'notice',
+        label: 'Notice',
+        children: [
+          {
+            value: 'alert',
+            label: 'Alert'
+          },
+          {
+            value: 'loading',
+            label: 'Loading'
+          },
+          {
+            value: 'message',
+            label: 'Message'
+          },
+          {
+            value: 'message-box',
+            label: 'MessageBox'
+          },
+          {
+            value: 'notification',
+            label: 'Notification'
+          }
+        ]
+      },
+      {
+        value: 'navigation',
+        label: 'Navigation',
+        children: [
+          {
+            value: 'menu',
+            label: 'Menu'
+          },
+          {
+            value: 'tabs',
+            label: 'Tabs'
+          },
+          {
+            value: 'breadcrumb',
+            label: 'Breadcrumb'
+          },
+          {
+            value: 'dropdown',
+            label: 'Dropdown'
+          },
+          {
+            value: 'steps',
+            label: 'Steps'
+          }
+        ]
+      },
+      {
+        value: 'others',
+        label: 'Others',
+        children: [
+          {
+            value: 'dialog',
+            label: 'Dialog'
+          },
+          {
+            value: 'tooltip',
+            label: 'Tooltip'
+          },
+          {
+            value: 'popover',
+            label: 'Popover'
+          },
+          {
+            value: 'card',
+            label: 'Card'
+          },
+          {
+            value: 'carousel',
+            label: 'Carousel'
+          },
+          {
+            value: 'collapse',
+            label: 'Collapse'
+          }
+        ]
+      }
+    ]
+  }
+]
+
 const schema = reactive<VFormSchema[]>([
   {
     field: 'field1',
@@ -140,30 +396,30 @@ const schema = reactive<VFormSchema[]>([
   {
     field: 'field10',
     component: 'Divider',
-    componentProps: {
+    label: t('formDemo.inputNumber')
-      text: t('formDemo.inputNumber')
-    }
   },
   {
     field: 'field11',
     label: t('formDemo.default'),
-    component: 'InputNumber'
+    component: 'InputNumber',
+    value: 0
   },
   {
-    field: 'field11',
+    field: 'field12',
     label: t('formDemo.position'),
     component: 'InputNumber',
     componentProps: {
       controlsPosition: 'right'
-    }
+    },
+    value: 0
   },
   {
-    field: 'field12',
+    field: 'field13',
     label: t('formDemo.select'),
     component: 'Divider'
   },
   {
-    field: 'field13',
+    field: 'field14',
     label: t('formDemo.default'),
     component: 'Select',
     options: [
@@ -178,7 +434,7 @@ const schema = reactive<VFormSchema[]>([
     ]
   },
   {
-    field: 'field14',
+    field: 'field15',
     label: t('formDemo.slot'),
     component: 'Select',
     options: [
@@ -194,7 +450,7 @@ const schema = reactive<VFormSchema[]>([
     optionsSlot: true
   },
   {
-    field: 'field15',
+    field: 'field16',
     label: t('formDemo.group'),
     component: 'Select',
     options: [
@@ -227,7 +483,7 @@ const schema = reactive<VFormSchema[]>([
     ]
   },
   {
-    field: 'field16',
+    field: 'field17',
     label: `${t('formDemo.group')}${t('formDemo.slot')}`,
     component: 'Select',
     options: [
@@ -261,18 +517,18 @@ const schema = reactive<VFormSchema[]>([
     optionsSlot: true
   },
   {
-    field: 'field17',
+    field: 'field18',
     label: `${t('formDemo.selectV2')}`,
     component: 'Divider'
   },
   {
-    field: 'field18',
+    field: 'field19',
     label: t('formDemo.default'),
     component: 'SelectV2',
     options: options.value
   },
   {
-    field: 'field18',
+    field: 'field20',
     label: t('formDemo.slot'),
     component: 'SelectV2',
     options: options.value,
@@ -283,13 +539,13 @@ const schema = reactive<VFormSchema[]>([
     }
   },
   {
-    field: 'field19',
+    field: 'field21',
     label: t('formDemo.group'),
     component: 'SelectV2',
     options: options2.value
   },
   {
-    field: 'field20',
+    field: 'field22',
     label: `${t('formDemo.group')}${t('formDemo.slot')}`,
     component: 'SelectV2',
     options: options2.value,
@@ -298,6 +554,70 @@ const schema = reactive<VFormSchema[]>([
         default: true
       }
     }
+  },
+  {
+    field: 'field23',
+    label: t('formDemo.cascader'),
+    component: 'Divider'
+  },
+  {
+    field: 'field24',
+    label: t('formDemo.default'),
+    component: 'Cascader',
+    options: options3
+  },
+  {
+    field: 'field25',
+    label: t('formDemo.slot'),
+    component: 'Cascader',
+    options: options3,
+    componentProps: {
+      slots: {
+        default: true
+      }
+    }
+  },
+  {
+    field: 'field26',
+    label: t('formDemo.switch'),
+    component: 'Divider'
+  },
+  {
+    field: 'field27',
+    label: t('formDemo.default'),
+    component: 'Switch',
+    value: false
+  },
+  {
+    field: 'field28',
+    label: t('formDemo.icon'),
+    component: 'Switch',
+    value: false,
+    componentProps: {
+      activeIcon: Check,
+      inactiveIcon: Close
+    }
+  },
+  {
+    field: 'field29',
+    label: t('formDemo.rate'),
+    component: 'Divider'
+  },
+  {
+    field: 'field30',
+    label: t('formDemo.default'),
+    component: 'Rate',
+    value: null
+  },
+  {
+    field: 'field31',
+    label: t('formDemo.icon'),
+    component: 'Rate',
+    value: null,
+    componentProps: {
+      voidIcon: ChatRound,
+      icons: [ChatRound, ChatLineRound, ChatDotRound]
+    }
   }
 ])
 </script>
@@ -320,21 +640,14 @@ const schema = reactive<VFormSchema[]>([
         <span class="link">{{ item.link }}</span>
       </template>
 
-      <template #field14-option="{ item }">
+      <template #field15-option="{ item }">
         <span style="float: left">{{ item.label }}</span>
         <span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
           {{ item.value }}
         </span>
       </template>
 
-      <template #field16-option="{ item }">
+      <template #field17-option="{ item }">
-        <span style="float: left">{{ item.label }}</span>
-        <span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
-          {{ item.value }}
-        </span>
-      </template>
-
-      <template #field18-default="{ item }">
         <span style="float: left">{{ item.label }}</span>
         <span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
           {{ item.value }}
@@ -347,6 +660,18 @@ const schema = reactive<VFormSchema[]>([
           {{ item.value }}
         </span>
       </template>
+
+      <template #field22-default="{ item }">
+        <span style="float: left">{{ item.label }}</span>
+        <span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
+          {{ item.value }}
+        </span>
+      </template>
+
+      <template #field25-default="{ node, data }">
+        <span>{{ data.label }}</span>
+        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+      </template>
     </VFrom>
   </ElConfigProvider>
 </template>

src/components/Form/src/VForm.vue

@@ -1,11 +1,18 @@
 <script lang="tsx">
-import { PropType, defineComponent, ref, computed, unref } from 'vue'
+import { PropType, defineComponent, ref, computed, unref, reactive, watch } from 'vue'
 import { ElForm, ElFormItem, ElRow, ElCol } from 'element-plus'
 import { componentMap } from './componentMap'
 import { propTypes } from '@/utils/propTypes'
 import { getSlot } from '@/utils/tsxHelper'
-import { setTextPlaceholder, setGridProp, setComponentProps, setItemComponentSlots } from './helper'
+import {
+  setTextPlaceholder,
+  setGridProp,
+  setComponentProps,
+  setItemComponentSlots,
+  setModel
+} from './helper'
 import { useRenderSelect } from './components/useRenderSelect'
+import { useRenderCascader } from './components/useRenderCascader'
 
 export default defineComponent({
   name: 'VForm',
@@ -31,9 +38,24 @@ export default defineComponent({
     labelWidth: propTypes.oneOfType([String, Number]).def(130)
   },
   setup(props, { slots }) {
+    // element form 实例
     const formRef = ref<ComponentRef<typeof ElForm>>()
     const getProps = computed(() => props)
     const { schema, isCol, isCustom, autoSetPlaceholder } = unref(getProps)
+    // 表单数据
+    const formModel = reactive<Recordable>({})
+
+    // 监听表单结构化数组，重新生成formModel
+    watch(
+      () => schema,
+      (schema) => {
+        setModel(schema, formModel)
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    )
 
     // 渲染包裹标签，是否使用栅格布局
     function renderWrap() {
@@ -67,20 +89,28 @@ export default defineComponent({
 
     // 渲染formItem
     function renderFormItem(item: VFormSchema) {
+      // 单独给只有options属性的组件做判断
+      const notRenderOptions = ['SelectV2', 'Cascader']
       return (
         <ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label}>
           {() => {
             const Com = componentMap[item.component as string] as ReturnType<typeof defineComponent>
             return (
               <Com
+                vModel={formModel[item.field]}
                 {...(autoSetPlaceholder && setTextPlaceholder(item))}
                 {...setComponentProps(item.componentProps)}
-                // 单独给SelectV2做判断
+                options={
-                options={item.component === 'SelectV2' ? item.options || [] : undefined}
+                  notRenderOptions.includes(item?.component as string)
+                    ? item.options || []
+                    : undefined
+                }
               >
                 {{
-                  default: () =>
+                  default: (data: Recordable) =>
-                    item.options && item.component !== 'SelectV2' ? renderOptions(item) : undefined,
+                    item.options && item?.component !== 'SelectV2'
+                      ? renderOptions(item, data)
+                      : undefined,
                   ...setItemComponentSlots(slots, item?.componentProps?.slots, item.field)
                 }}
               </Com>
@@ -91,11 +121,14 @@ export default defineComponent({
     }
 
     // 渲染options
-    function renderOptions(item: VFormSchema) {
+    function renderOptions(item: VFormSchema, data: Recordable) {
       switch (item.component) {
         case 'Select':
           const { renderSelectOptions } = useRenderSelect(slots)
           return renderSelectOptions(item)
+        case 'Cascader':
+          const { useRenderCascaderOptions } = useRenderCascader(slots)
+          return useRenderCascaderOptions(item, data)
         default:
           break
       }
@@ -104,7 +137,7 @@ export default defineComponent({
     // 过滤传入Form组件的属性
     function getFormBindValue() {
       // 避免在标签上出现多余的属性
-      const delKeys = ['schema', 'isCol', 'autoSetPlaceholder', 'isCustom']
+      const delKeys = ['schema', 'isCol', 'autoSetPlaceholder', 'isCustom', 'model']
       const props = { ...unref(getProps) }
       for (const key in props) {
         if (delKeys.indexOf(key) !== -1) {
@@ -115,7 +148,7 @@ export default defineComponent({
     }
 
     return () => (
-      <ElForm ref={formRef} {...getFormBindValue()}>
+      <ElForm ref={formRef} {...getFormBindValue()} model={formModel}>
         {{
           // 如果需要自定义，就什么都不渲染，而是提供默认插槽
           default: () => (isCustom ? getSlot(slots, 'default') : renderWrap())

src/components/Form/src/components/useRenderCascader.tsx

@@ -0,0 +1,23 @@
+import { Slots } from 'vue'
+import { getSlot } from '@/utils/tsxHelper'
+
+// 这个可能是element-plus的BUG，需要这么处理，才能渲染出来。
+export function useRenderCascader(slots: Slots) {
+  function useRenderCascaderOptions(item: VFormSchema, data: Recordable) {
+    return (
+      <span>
+        {{
+          default: () => {
+            return item?.componentProps?.slots?.default
+              ? getSlot(slots, `${item.field}-default`, data)
+              : data?.data[item?.optionsField?.labelField || 'label']
+          }
+        }}
+      </span>
+    )
+  }
+
+  return {
+    useRenderCascaderOptions
+  }
+}

src/components/Form/src/helper.ts

@@ -1,7 +1,6 @@
 import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()
-import { shallowRef } from 'vue'
+import { unref } from 'vue'
-import { isFunction } from '@/utils/is'
 import { Slots } from 'vue'
 import { getSlot } from '@/utils/tsxHelper'
 
@@ -71,27 +70,35 @@ export function setGridProp(col: ColProps = {}): ColProps {
   return colProps
 }
 
-type ComponentPropsModel = {
-  clearable: boolean
-} & Recordable
-
 /**
  *
  * @param props 传入的组件属性
  * @returns 默认添加 clearable 属性
  */
-export function setComponentProps(props: Recordable = {}): ComponentPropsModel {
+export function setComponentProps(props: Recordable = {}): Recordable {
-  for (const key in props) {
+  const propsObj = unref(props)
-    // 如果传入的是组件，需要让其失去响应式，避免不必要的性能开销
+  // for (const key in propsObj) {
-    // 这样判断好像还不太合理。后续看看没有更合理的判断方法
+  //   // 如果传入的是组件，需要让其失去响应式，避免不必要的性能开销
-    if (props[key]?.render && isFunction(props[key]?.render)) {
+  //   // 这样判断好像还不太合理。后续看看没有更合理的判断方法
-      props[key] = shallowRef(props[key]?.render())
+  //   if (propsObj[key]?.render && isFunction(propsObj[key]?.render)) {
-    }
+  //     propsObj[key] = shallowRef(propsObj[key]?.render())
-  }
+  //   }
-  const componentProps: ComponentPropsModel = {
+  //   // if (key === 'icon') {
+  //   //   propsObj[key] = [...propsObj[key]]
+  //   // }
+  // }
+  const componentProps: Recordable = {
     clearable: true,
-    ...props
+    ...propsObj
   }
+  // componentProps.icons
+  //   ? (componentProps.icons = (componentProps.icons as Recordable[]).map((v) => {
+  //       return shallowRef(v?.render()?.value)
+  //     }))
+  //   : undefined
+  // 需要删除额外的属性
+  delete componentProps?.slots
+  console.log(componentProps)
   return componentProps
 }
 
@@ -118,4 +125,21 @@ export function setItemComponentSlots(
   return slotObj
 }
 
-export function setModel() {}
+/**
+ *
+ * @param schema Form表单结构化数组
+ * @param formModel FormMoel
+ * @description 生成对应的formModel
+ */
+export function setModel(schema: VFormSchema[], formModel: Recordable) {
+  schema.map((v) => {
+    // 如果是hidden，就删除对应的值
+    if (v.hidden) {
+      delete formModel[v.field]
+    } else {
+      const hasField = Reflect.has(formModel, v.field)
+      // 如果先前已经有值存在，则不进行重新赋值，而是采用现有的值
+      formModel[v.field] = hasField ? formModel[v.field] : v.value !== void 0 ? v.value : ''
+    }
+  })
+}

src/locales/en.ts

@@ -17,6 +17,9 @@ export default {
     autocomplete: 'Autocomplete',
     select: 'Select',
     group: 'Select Group',
-    selectV2: 'SelectV2'
+    selectV2: 'SelectV2',
+    cascader: 'Cascader',
+    switch: 'Switch',
+    rate: 'Rate'
   }
 }

src/locales/zh-CN.ts

@@ -17,6 +17,9 @@ export default {
     autocomplete: '自动补全',
     select: '选择器',
     group: '选项分组',
-    selectV2: '虚拟列表选择器'
+    selectV2: '虚拟列表选择器',
+    cascader: '级联选择器',
+    switch: '开关',
+    rate: '评分'
   }
 }

src/types/componentType.d.ts

@@ -32,7 +32,7 @@ declare global {
     tag?: string
   }
 
-  declare type FormValueTypes = string | number | string[] | number[] | boolean | undefined
+  declare type FormValueTypes = string | number | string[] | number[] | boolean | undefined | null
 
   declare interface FormItemRule extends RuleItem {
     trigger?: string
@@ -68,17 +68,30 @@ declare global {
   }
 
   declare type VFormSchema = {
+    // 唯一值
     field: string
+    // 标题
     label?: string
+    // col组件属性
     colProps?: ColProps
-    componentProps?: Recordable
+    // 表单组件属性，slots对应的是表单组件的插槽，规则：${field}-xxx，具体可以查看element-plus文档
+    componentProps?: { slots?: Recordable } & Recordable
+    // formItem组件属性
     formItemProps?: FormItemProps
+    // 渲染的组件
     component?: ComponentName
+    // 初始值
     value?: FormValueTypes
+    // 下拉选项
     options?: FormOptions[]
+    // 下拉选项别名
     optionsField?: FormOptionsAlias
+    // 下拉选项插槽，规则：${field}-option
     optionsSlot?: boolean
+    // 是否隐藏
     hidden?: boolean
+    // 表单组件插槽，规则：${field}
+    slot?: boolean
   }
 
   // VForm types end

vite.config.ts

@@ -36,7 +36,14 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       VueJsx(),
       WindiCSS(),
       StyleImport({
-        resolves: [ElementPlusResolve()]
+        resolves: [ElementPlusResolve()],
+        libs: [{
+          libraryName: 'element-plus',
+          esModule: true,
+          resolveStyle: (name) => {
+            return `element-plus/es/components/${name.substring(3)}/style/css`
+          }
+        }]
       }),
       // AutoImport({
       //   imports: [