vue列表中表单的验证
先上效果图:
在点击确认的时候会验证带有验证的字段
嵌套逻辑:
表单
表格
表格项
表单项
表单项
表格项
表格
表单
代码部分:
<!-- 注意此处的model,需要一个对象,而我们的数据是一个列表,我们列表封装成一个对象放在这里就ok了 这里不需要指定rules-->
<el-form :model="{'sysDictDataList':sysDictDataList}" ref="sysDictDataListRules">
<el-table
:data="sysDictDataList"
style="width: 100%">
<el-table-column
label="字典类型">
<template slot-scope="scope">
<el-form-item>
<el-input v-model="scope.row.dictType" :disabled="true"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="dictType"
label="数据标签">
<template slot-scope="scope">
<!-- 注意此处的prop,需要使用此类型,不能直接填字段名 rules指向该字段的验证规则 -->
<el-form-item :prop="'sysDictDataList.'+scope.$index+'.dictLabel'" :rules="sysDictDataListRules.dictLabel">
<el-input v-model="scope.row.dictLabel" placeholder="请输入数据标签"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="dictType"
label="数据键值">
<template slot-scope="scope">
<el-form-item :prop="'sysDictDataList.'+scope.$index+'.dictValue'" :rules="sysDictDataListRules.dictValue">
<el-input v-model="scope.row.dictValue" placeholder="请输入数据键值"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="dictType"
label="显示排序">
<template slot-scope="scope">
<el-form-item :prop="'sysDictDataList.'+scope.$index+'.dictSort'" :rules="sysDictDataListRules.dictSort">
<el-input-number v-model="scope.row.dictSort" controls-position="right" :min="0"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="备注">
<template slot-scope="scope">
<el-form-item :prop="'sysDictDataList.'+scope.$index+'.remark'" :rules="sysDictDataListRules.remark">
<el-input v-model="scope.row.remark" placeholder="请输入内容"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="状态">
<template slot-scope="scope">
<el-form-item>
<el-radio-group v-model="scope.row.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>{{dict.dictLabel}}
</el-radio>
</el-radio-group>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-form-item>
<el-button @click="deleteDetails(scope.$index,sysDictDataList)">删除</el-button>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
数据:
sysDictDataList: [], // 字典详细列表
sysDictDataListRules: { // 字典详细列表的验证
dictLabel: [
{required: true, message: "数据标签不能为空", trigger: "blur"}
],
dictValue:[
{required: true, message: "数据键值不能为空", trigger: "blur"}
],dictSort:[
{required: true, message: "排序不能为空", trigger: "blur"}
],remark:[
{required: true, message: "备注内容不能为空", trigger: "blur"}
]
}
验证方法:
this.$refs['sysDictDataListRules'].validate(valid =>{
if (valid){
console.log('验证成功,提交');
}
});
注意:如果是根据不同条件展示不同验证表单,使用v-if可能会有意想不到的错误发生,我使用v-show解决此类问题
vue列表中表单的验证的更多相关文章
- 关于vue.js中表单控件绑定练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- Vue iview 表单封装验证
以下内容转自iview社区,仅供自己查看使用 Form表单部分 <div> <Form ref="FormOne" :model="FormOne&qu ...
- elementUI中表格中表单的验证
表格中的表单验证,就是在将表格放在表单中,将表格绑定的数据也放在表单中. 最重要的是要给表格中需要验证的字段动态添加prop,再给其绑定规则. <el-form :model="tab ...
- Bootstrap中表单控件状态(验证状态)
Bootstrap 表单 http://www.runoob.com/try/try2.php?filename=bootstrap3-form-controlstate (这链接里有简介) &l ...
- HTML5中表单验证的8种方法(转)
在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义.就其核心而言,表单验证是一套系统,它为终端用户检测无效的控件数据并标记这些错误.换言之,表单验证就是在表单提交服务器前对其进行一系列的检查并 ...
- HTML5中表单验证的8种方法
HTML5中表单验证的8种方法 2012-4-21 11:00| 发布者: benben| 查看: 2765| 评论: 0 摘要: 前一篇,我们介绍了HTML5中新的表单特性和函数, 今天就继续来谈谈 ...
- YII中表单验证
关于表单的验证有三种: 1.yii的客户端验证 2.yii的服务器端验证 3.yii的ajax验证 例如: 1.在表单对应的模型中定义一个rules方法(该方添加后,在表单提交时,将自动被调用) pu ...
- angular 中表单验证的探索
需求 之前有一段时间做一个搜索查询 但是有很多限制条件,如果校验不成功需要给用户提示错误,当然项目用的是组件库的校验 我能否自己写一个? 其实 我是不会的!!! 探索 angular 的校验功能很强大 ...
- spring boot中表单验证的使用
一.前言 为啥子要搞这个表单验证呢?答案简单而现实,举个栗子,你辛辛苦苦的写了一个录入个人信息的功能,比如年龄这个位置,用户就没看到一下子写了个性别男,一提交,直接报错了,是不是很尴尬呢, 作为一个测 ...
随机推荐
- leaflet本地加载arcgis切片
var origin = [-20037700, 33711400];//图层起点坐标 var resolutions = [ 8466.6836000338681, // Level 0 4233. ...
- 华为VS小米 营销手段有待继续强化
营销手段有待继续强化" title="华为VS小米 营销手段有待继续强化"> 对于大多数来说,希望看到强者愈强的戏码.比如:NBA里的N场连胜.苹果帝国千秋万载一统 ...
- python对csv读写
1.csv文件读取 with open("C:\\Users\\Administrator\\Desktop\\test.csv", 'r', encoding='utf-8') ...
- 在JavaScript里的“对象字面量”是什么意思?
字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量.字面量分为字符串字面量(string literal ).数组字面量(array literal)和对象字面量(ob ...
- Angular总结
angular关键核心点进行总结 1 2 angular中有很多知识点需要学习,学习成本是很大的,我通过平常开发中把一些 很重要知识点总结下来,不管是以后拿来用,或者跳槽面试需要,我都感觉是很有帮助的 ...
- OLE DB访问接口“MICROSOFT.JET.OLEDB.4.0”配置为在单线程单位模式下运行,所以该访问接口无法用于分布式
OLE DB访问接口"MICROSOFT.JET.OLEDB.4.0"配置为在单线程单位模式下运行,所以该访问接口无法用于分布式 数据库操作excel时遇到的以上问题的解决方法 解 ...
- scrapy爬虫-代理IP中间件
class ProxyDownloaderMiddleware(object): # Not all methods need to be defined. If a method is not de ...
- NIO-EPollSelectorIpml源码分析
目录 NIO-EPollSelectorIpml源码分析 目录 前言 初始化EPollSelectorProvider 创建EPollSelectorImpl EPollSelectorImpl结构 ...
- Implementing 5G NR Features in FPGA
目录 论文来源 论文简介 基本原理 论文创新点 借鉴之处 论文来源 2018 European Conference on Networks and Communications (EuCNC),Ja ...
- APPium+Python+iOS屏幕滑动方法对比
最近在学习appium自动化,对iOS手机进行滑动操作进行总结: 1.mobile:scroll;该方法在实际使用调用时,会滚动2次.执行时间很长. 向下滚动整个屏幕driver.execute_sc ...