vue3antd封装form表单form⼦组件
<template>
<div>
<a-form
ref="formRef"
:model="formState"
:rules="rules"
antdesignvue 表格合计:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-item
:
label="item.title"
v-for="(item, index) in variableArr"
:key="index"
:name="item.key"
>
<template v-if="pe == 'input'">
<a-input v-model:value="formState[item.key]" />
</template>
<template v-else-if="pe == 'select'">
<a-select
ref="select"
v-model:value="formState[item.key]"
>
<a-select-option :value="i.value" v-for="i in item.arr" :key="i">{{
i.name
}}</a-select-option>
</a-select>
</template>
<template v-else-if="pe == 'checkbox'">
<a-checkbox-group v-model:value="formState[item.key]">
<a-checkbox v-for="i in item.arr" :key="i" :value="i.value">{{
i.name
}}</a-checkbox>
</a-checkbox-group>
</template>
<template v-else>
<a-radio-group v-model:value="formState[item.key]">
<a-radio v-for="i in item.arr" :key="i" :value="i.value">{{
i.name
}}</a-radio>
</a-radio-group>
</template>
</a-form-item>
</a-form>
<a-button @click="show">***</a-button>
</div>
</template>
<script>
import { defineComponent, reactive, toRefs, watch, ref, onMounted } from "vue";
export default defineComponent({
props: ["rules", "variableArr", "variable"],
setup(props, { emit }) {
onMounted(() => {
data.rules = props.rules;
data.variableArr = props.variableArr;
data.formState = props.variable;
});
const formRef = ref();
const show = () => {
console.log(data.formState);
};
const data = reactive({
formState: {},
variableArr: [],
labelCol: {
span: 4,
},
wrapperCol: {
span: 14,
},
rules: {},
formRef,
show,
});
// watch(
/
/  () => data.formState,
//  () => {
//    console.log(data.formState, "formState");
//  }
// );
// watch(props, (newVal, oldVal) => {
//  console.log(props, "props");
// });
return {
...toRefs(data),
};
},
});
</script>
<style lang="less">
@import url("@/styles/w_css.less");
</style>
⽗组件
//使⽤
<Wfrom
:variable="variable"
:rules="rules"
:
variableArr="variableArr"
></Wfrom>
//引⼊⼦组件
import Wfrom from "../../components/Wform/index.vue";
setup() {
const data = reactive({
//需要的form字段
variable: {
userName: "",
passWord: "",
gender: 0,
interest: null,
enable: 0,
},
//对应的正则验证规则
rules: {
userName: {
required: true,
message: "请输⼊⽤户名",
trigger: "blur",
},
passWord: {
required: true,
message: "请输⼊密码",
trigger: "blur",
},
},
//具体form表单中的form元素⽀持input select checkbox group四种类型
variableArr: [
{
key: "userName", //对应字段名
title: "⽤户名",//form表单显⽰的汉字
type: "input", //input-select-checkbox-group 类型
},
{
key: "passWord", //对应字段名
title: "密码",//form表单显⽰的汉字
type: "input", //input-select-checkbox-group 类型
},
{
key: "gender", //对应字段名
title: "性别",//form表单显⽰的汉字
type: "select", //input-select-checkbox-group 类型
arr: [//如果是select或者checkbox或者group需要⼀个数组来描述具体内容            { value: 0, name: "男" },
{ value: 1, name: "⼥" },
],
},
{
key: "interest",
title: "兴趣爱好",
type: "checkbox", //input-select-checkbox-group 类型
arr: [
{ value: 0, name: "打篮球" },
{ value: 1, name: "乒乓球" },
{ value: 2, name: "打游戏" },
]
,
},
{
key: "enable",
title: "是否启⽤",
type: "group", //input-select-checkbox-group 类型          arr: [
{ value: 0, name: "是" },
{ value: 1, name: "否" },
],
},
],
});
return {
...toRefs(data),
};
},