vue3 antd封装form表单

form子组件

<template>
  <div>
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :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="item.type == 'input'">
          <a-input v-model:value="formState[item.key]" />
        </template>
        <template v-else-if="item.type == 'select'">
          <a-select
            ref="select"
            v-model:value="formState[item.key]"
            style="width: 120px"
          >
            <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="item.type == '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),
    };
  },