iview使用小结之 Form表单

最新推荐文章于 2025-02-03 15:45:23 发布

GiGi-L

最新推荐文章于 2025-02-03 15:45:23 发布

阅读量2.5k

点赞数

分类专栏： js 文章标签： iview Form表单

本文链接：https://blog.youkuaiyun.com/Loria1/article/details/103985837

版权

本文总结了在iview框架中使用Form表单的步骤，包括设置ref值进行数据校验，通过model绑定数据源，rules定义验证规则，data中详细规定验证规则，prop值对应验证规则的key，以及如何利用datepicker的options限制时间和onchange事件处理时间限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.给表单设置ref值，通过this.$ref.name.validate((valid) =>{}) 校验数据
2.通过model绑定Form数据源searchParam
3.通过rules绑定验证规则
4.在data里制定详细的验证规则
5.每个表单的prop值对用验证规则里的名字相同的key
6.通过datapicker的options设置时间选项限制
7.通过绑定onchange时间设置起始时间发生变化后的限制

 <template>
     <Form ref="searchFormRef" :model="searchParam" :label-width="100" :rules="ruleValidate">
        <Row :gutter="16">
             <Col span="6" class="height-80">
                <FormItem label="账号" prop="account" aria-required="true">
                    <Input    
                        placeholder="输入账号或点击右侧查询按钮选择"
                        v-model="searchParam.account"
                        class="input-style"
                        icon="ios-search-outline"