vue+ivew model框 select校验遇到的问题

maxiaole_z

已于 2023-07-27 15:17:54 修改

阅读量604

点赞数

分类专栏： ivew 文章标签： vue.js 前端 iview

于 2023-07-27 15:09:55 首次发布

本文链接：https://blog.csdn.net/maxiaole_z/article/details/131960003

版权

ivew 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

当iview的model在点击关闭时，即使校验未通过也会关闭。解决方法包括自定义页脚内容，删除默认的on-ok和on-cancel定义，添加校验规则，特别是针对select的number类型校验和触发器设置。此外，需注意$refs中form的ref和model名称应不同，以及单个和多个字段的trigger设置差异。

摘要由CSDN通过智能技术生成

iview +model 点击关闭，校验没有通过也会关闭

解决办法：

第一步：自定义页脚内容

<div slot="footer">
    <Button type="primary" @click="confirmCarryOver()">确认</Button>
    <Button @click="showAccounts = false" style="margin-left: 8px">关闭</Button>
</div>

第二步：删除：@on-ok="confirmCarryOver" @on-cancel="cancel" cancelText="关闭" okText="确认"类似的定义

第三步：添加校验：

rules: {
    lv_id: [
             {
                required: true,
                message: "请选择转出卡",
                trigger: "change",
                type: 'number'
              }
            ]
          },

1.注意select的校验， iview 默认校验数据类型为 String，有时候select 用的 value 是 number 类型的，所以校验添加 type 类型：type:number

2.如果select选择后，校验不消失添加：trigger: "change"

3.关闭model，校验不消失: 添加：that.$refs.formAccountsRef.resetFields();

注意：formAccountsRef是form的，不是model。

4.注意： <Form ref="formAccountsRef" :model="formAccounts" :rules="rules">

form 的ref 和 model 名字不要一样，要不然清除校验等等对form的操作会不好用。

5.注意：ivew

单个时:trigger:'change'

多个时:trigger:'blur,change'

element-ui：

单个： trigger: 'change'

多个：trigger: ['blur', 'change']