fix: 修复Form赋值问题

package.json

@@ -28,15 +28,15 @@
   },
   "dependencies": {
     "@iconify/iconify": "^3.0.0",
-    "@vueuse/core": "^9.4.0",
-    "@wangeditor/editor": "^5.1.22",
+    "@vueuse/core": "^9.5.0",
+    "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.10",
     "@zxcvbn-ts/core": "^2.1.0",
     "animate.css": "^4.1.1",
     "axios": "^1.1.3",
     "echarts": "^5.4.0",
     "echarts-wordcloud": "^2.0.0",
-    "element-plus": "2.2.20",
+    "element-plus": "2.2.21",
     "intro.js": "^6.0.0",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
@@ -46,7 +46,7 @@
     "qrcode": "^1.5.1",
     "qs": "^6.11.0",
     "url": "^0.11.0",
-    "vue": "3.2.41",
+    "vue": "3.2.45",
     "vue-i18n": "9.2.2",
     "vue-router": "^4.1.6",
     "vue-types": "^4.2.1",
@@ -55,7 +55,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
-    "@iconify/json": "^2.1.134",
+    "@iconify/json": "^2.1.139",
     "@intlify/vite-plugin-vue-i18n": "^6.0.3",
     "@purge-icons/generated": "^0.9.0",
     "@types/intro.js": "^5.1.0",
@@ -64,35 +64,35 @@
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.5.0",
     "@types/qs": "^6.9.7",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
     "@vitejs/plugin-vue": "^3.2.0",
-    "@vitejs/plugin-vue-jsx": "^2.1.0",
+    "@vitejs/plugin-vue-jsx": "^2.1.1",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-define-config": "^1.11.0",
+    "eslint-define-config": "^1.12.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.7.0",
-    "husky": "^8.0.1",
+    "husky": "^8.0.2",
     "less": "^4.1.3",
     "lint-staged": "^13.0.3",
     "plop": "^3.1.1",
-    "postcss": "^8.4.18",
+    "postcss": "^8.4.19",
     "postcss-html": "^1.5.0",
     "postcss-less": "^6.0.0",
     "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
-    "rollup": "^3.2.5",
-    "stylelint": "^14.14.1",
+    "rollup": "^3.3.0",
+    "stylelint": "^14.15.0",
     "stylelint-config-html": "^1.1.0",
-    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-recommended": "^9.0.0",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-order": "^5.0.0",
-    "typescript": "4.8.4",
-    "unplugin-vue-macros": "^0.16.0",
-    "vite": "3.2.2",
+    "typescript": "4.9.3",
+    "unplugin-vue-macros": "^0.16.3",
+    "vite": "3.2.4",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-mock": "^2.9.6",

src/components/Form/src/Form.vue

@@ -226,11 +226,7 @@ export default defineComponent({
                   vModel={formModel.value[item.field]}
                   {...(autoSetPlaceholder && setTextPlaceholder(item))}
                   {...setComponentProps(item)}
-                  style={
-                    item?.component === 'Input'
-                      ? { width: '189.5px', ...item.componentProps?.style }
-                      : { ...item.componentProps?.style }
-                  }
+                  style={item.componentProps?.style}
                   {...(notRenderOptions.includes(item?.component as string) &&
                   item?.componentProps?.options
                     ? { options: item?.componentProps?.options || [] }
@@ -257,8 +253,8 @@ export default defineComponent({
           return renderRadioOptions(item)
         case 'Checkbox':
         case 'CheckboxButton':
-          const { renderChcekboxOptions } = useRenderCheckbox()
-          return renderChcekboxOptions(item)
+          const { renderCheckboxOptions } = useRenderCheckbox()
+          return renderCheckboxOptions(item)
         default:
           break
       }

src/components/Form/src/components/useRenderCheckbox.tsx

@@ -3,7 +3,7 @@ import { ElCheckbox, ElCheckboxButton } from 'element-plus'
 import { defineComponent } from 'vue'
 
 export const useRenderCheckbox = () => {
-  const renderChcekboxOptions = (item: FormSchema) => {
+  const renderCheckboxOptions = (item: FormSchema) => {
     // 如果有别名，就取别名
     const labelAlias = item?.componentProps?.optionsAlias?.labelField
     const valueAlias = item?.componentProps?.optionsAlias?.valueField
@@ -13,14 +13,14 @@ export const useRenderCheckbox = () => {
     return item?.componentProps?.options?.map((option) => {
       const { value, ...other } = option
       return (
-        <Com label={option[labelAlias || 'value']} {...other}>
-          {option[valueAlias || 'label']}
+        <Com {...other} label={option[valueAlias || 'value']}>
+          {option[labelAlias || 'label']}
         </Com>
       )
     })
   }
 
   return {
-    renderChcekboxOptions
+    renderCheckboxOptions
   }
 }

src/components/Form/src/components/useRenderRadio.tsx

@@ -13,8 +13,8 @@ export const useRenderRadio = () => {
     return item?.componentProps?.options?.map((option) => {
       const { value, ...other } = option
       return (
-        <Com label={option[labelAlias || 'value']} {...other}>
-          {option[valueAlias || 'label']}
+        <Com {...other} label={option[valueAlias || 'value']}>
+          {option[labelAlias || 'label']}
         </Com>
       )
     })

src/components/Form/src/components/useRenderSelect.tsx

@@ -36,9 +36,9 @@ export const useRenderSelect = (slots: Slots) => {
 
     return (
       <ElOption
+        {...other}
         label={labelAlias ? option[labelAlias] : label}
         value={valueAlias ? option[valueAlias] : value}
-        {...other}
       >
         {{
           default: () =>