fix: 修复Form赋值问题

This commit is contained in:
kailong321200875 2022-11-17 10:58:06 +08:00
parent 0b671e914e
commit f37cc1b580
5 changed files with 27 additions and 31 deletions

View File

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

View File

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

View File

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

View File

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

View File

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