以下是基于Vue3+Ts版本的配置化表单基础组件的实现方式：
1. 在组件中引入表单配置项和表单数据对象：
```vue
<template>
<el-form :model="formData" :rules="rules" ref="form" label-width="100px">
<el-row :gutter="20">
<el-col :span="item.span" v-for="(item, index) in formConfig" :key="index">
<component :is="item.type" :config="item" :formData="formData"></component>
</el-col>
</el-row>
</el-form>
</template>
<script>
import { defineComponent, ref } from 'vue';
import { ElForm, ElRow, ElCol } from 'element-plus';
import { FormConfig, FormData } from './types';
import FormItem from './FormItem.vue';
export default defineComponent({
name: 'ConfigForm',
components: {
ElForm,
ElRow,
ElCol,
FormItem,
},
props: {
formConfig: {
type: Array as () => FormConfig[],
required: true,
},
formData: {
type: Object as () => FormData,
required: true,
},
rules: {
type: Object,
default: () => ({}),
},
},
});
</script>
```
2. 在表单配置项中定义每个表单项的类型、名称、校验规则等信息：
```vue
<script lang="ts">
import { defineComponent } from 'vue';
import { FormItemConfig } from './types';
import { ElInput, ElSelect } from 'element-plus';
export default defineComponent({
name: 'FormItem',
components: {
ElInput,
ElSelect,
},
props: {
config: {
type: Object as () => FormItemConfig,
required: true,
},
formData: {
type: Object,
required: true,
},
},
computed: {
isSelect() {
return this.config.type === 'select';
},
},
methods: {
handleChange(value: any) {
this.$emit('change', value);
},
},
});
</script>
```
3. 在表单项组件中根据表单配置项的类型渲染不同的表单项：
```vue
<template>
<component :is="isSelect ? 'el-select' : 'el-input'" v-model="formData[config.name]" :placeholder="config.placeholder" :disabled="config.disabled" :options="config.options" @change="handleChange"></component>
</template>
```
4. 在父组件中使用表单组件并传入表单配置项和表单数据对象：
```vue
<template>
<config-form :form-config="formConfig" :form-data="formData" :rules="rules"></config-form>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import ConfigForm from './ConfigForm.vue';
import { FormConfig, FormData } from './types';
export default defineComponent({
name: 'App',
components: {
ConfigForm,
},
setup() {
const formData = ref({
name: '',
age: '',
gender: '',
});
const formConfig: FormConfig[] = [
{
type: 'input',
name: 'name',
label: '姓名',
placeholder: '请输入姓名',
span: 8,
rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
},
{
type: 'input',
name: 'age',
label: '年龄',
placeholder: '请输入年龄',
span: 8,
rules: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
},
{
type: 'select',
name: 'gender',
label: '性别',
placeholder: '请选择性别',
span: 8,
options: [
{ label: '男', value: 'male' },
{ label: '女', value: 'female' },
],
rules: [{ required: true, message: '请选择性别', trigger: 'change' }],
},
];
const rules = {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
};
return {
formData,
formConfig,
rules,
};
},
});
</script>
```
1853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
