: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>...
1<divv-for="(item,index) in formList":key="index">2<a-form3ref="formRef"4:rules="rules"5:model="formList"6:label-col="{ style: { width: '130px' } }"7>8<a-row:gutter="[24, 24]">9<a-col:span="12">10<a-form-item11label="监控点位名称"12:name="[index,'name']"13...
将自身的formItemEmitter、prop、rules、validate属性和方法,provide给子孙组件(ti-input、ti-select等UI控件) // ti-form-item.vue文件 <template> <div class="ti-form-item"> <label for=""> {{ label }} </label> <slot></slot> <p class="errors"> {{ error }} </p> </div> </template>...
v-model:value="formState.password" type="password" placeholder="请输入密码" allowClear /> </a-form-item> </a-form> <div class="login-button"> <a-button v-if="switchBtn" size="large" type="primary" @click="login">登录</a-button> <a-button v-else size="large" type="primary" ...
<a-form-item label="Bucket名称" name="bucketName" :rules="rule.bucketNameRules()" > <a-input style="width: 500px;" v-model:value="bucketInfo.bucketName" :maxlength="63" placeholder="Bucket名称" /> </a-form-item> </a-form> ...
itemlabel="班课名称"name="courseName":rules="[{ required: true, message: '请输入班课名称' }]"><a-inputallowClearplaceholder="输入班课名称"v-model:value="formState.courseName"></a-input></a-form-item></a-form></a-modal></div></template><scriptsetup>import { reactive, ref, next...
vue3antd封装form表单 vue3antd封装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"> <...
<el-dialog :title="state.dialogTitle" v-model="state.dialogAdminVisible" @close="handleClose"> <el-form :model="state.admin" :rules="state.admin_rules" ref="adminForm" > <el-form-item label="昵称" prop="nickname"> <el-input v-model="state.admin.nickname" autocomplete="off"></el-...
在a-form-item中添加name属性,结构为用户类型-下标-用户属性字段 (注意:这是最关键的一点,在自定义校验回调函数中用到),例如:主播列表,anchor-0-username,主播列表中下标为0的主播的用户名。 具体结构如下: <template><a-formref="formRef":model="form"><divclass="section"><h3>主播</h3><divv-for="...
-- more ... --> </a-form-item> </a-form> </template> </mi-register> // 自定义校验规则 <mi-register :action="api.register" :rules="rules"></mi-login> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ data() { const checkUserName = (...