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), }; },
本文来自博客园,作者:小万子呀,转载请注明原文链接:https://www.cnblogs.com/newBugs/p/15931520.html