elementUI表单嵌套表格并对每行进行校验

elementUI 表单嵌套表格并进行校验。

效果展示

先看看这是不是需要的效果^_^

​

如图，ElementUI 表单里嵌套了表格，表格内每行能进行【保存】【新增】【编辑】【删除】【重置】等操作，同时可以对每行的某些字段进行校验（而不是整个表单校验！），这种需求很常见，所以记录下来。

代码链接

关键代码

  1. 表格数据
// 数据格式必须是【对象嵌套数组】，【form】绑定表单，【list】绑定表格

form: {

  // 表格数据

  list: [

      { id: 1, name: '小叶', age: '12', phone: '123456', show: true },

      { id: 2, name: '小李', age: '23', phone: '123457', show: true },

      { id: 3, name: '小林', age: '12', phone: '123458', show: true }

  ]

},
  1. 组件嵌套

  1. 添加字段校验的时候，格式必须写成这样的 :prop="'list.' + scope.$index + '.name'"

    这是 elementui 规定的格式，渲染后的结果为 list.1.name

  2. 每个字段要动态绑定表单的 rules 属性

  3. 如果不是以上的格式，会出错！！！

// 表单必须嵌套在表格的外面，表单必须绑定【rules】【ref】属性

<el-form :model="form" :rules="rules" ref="form">

   <el-table :data="form.list">

       <el-table-column prop="name" label="姓名">

           <template scope="scope">

  			// 每个字段动态的绑定表单的【prop】【rules】属性

  			<el-form-item :prop="'list.' + scope.$index + '.name'" 											 :rules="rules.name">

                    <el-input size="mini" v-model="scope.row.name" placeholder="请输入" 							clearable></el-input>

               </el-form-item>

           </template>

       </el-table-column>

  </el-table>

</el-form>

  1. 校验方法

    1. 表单的字段对象存在于 this.$refs['form'].fields 中，并且字段对象具有 prop【datas.1.name】 属性和 validateField 方法【验证 datas.1.name 能否通过校验】
    2. 但是 validateField 方法需要手动创建来验证能否通过校验
    3. 必须创建，否则会出错！！！
    // 表单校验方法
    
// 【form】是需要校验的表单，就是表单中【ref】绑定的字段
    
// 【index】是需要传入的行数，字段【scope.$index】
    
validateField(form, index) {
    
     let result = true;
    
     for (let item of this.$refs[form].fields) {
    
         if(item.prop.split(".")[1] == index){
    
             this.$refs[form].validateField(item.prop, err => {
    
                 if(err !="") {
    
                     result = false;
    
                 }
    
             });
    
         }
    
         if(!result) break;
    
     }
    
     return result;
    
}

  2. 重置方法

    // 对【需要校验】的表单字段进行重置
    
// 参数同校验方法，如果是全部重置
    
reset(form, index) {
    
    this.$refs[form].fields.forEach(item => {
    
        if(item.prop.split(".")[1] == index){
    
            item.resetField();
    
        }
    
    })
    
}

// 如果需要全部重置可以直接质控表单中字段
    
// 【row】是每行传入的数据
    
resetRow(row) {
    
    row.name = "";
    
    row.age = "";
    
    row.phone = "";
    
}

完整代码

因为用的是在线链接，网络不稳定时页面不一定能加载出来，使用时可以更换成本地的！

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>vue表单嵌套表格逐行验证</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <!-- 引入样式 -->

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!-- 引入组件库 -->

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body>

    <div id="app">

        <!-- 页面组件 -->

        <h2 style="text-align: center; line-height: 23px;color: #909399;">vue表单嵌套表格逐行验证</h2>

        <el-form :model="form" :rules="rules" ref="form" :inline="true"

            style="margin: 23px auto 0px; width: 96%; overflow: hidden;">

            <el-table border :data="form.list">

                <el-table-column align="center" prop="id" label="序号" width="55">

                </el-table-column>

                <el-table-column align="center" prop="name" label="姓名">

                    <template scope="scope">

                        <el-form-item :prop="'list.' + scope.$index + '.name'" :rules="rules.name"

                            v-if="scope.row.show">

                            <el-input size="mini" v-model="scope.row.name" placeholder="请输入" clearable>

                            </el-input>

                        </el-form-item>

                        <div v-if="!scope.row.show">{{scope.row.name}}</div>

                    </template>

                </el-table-column>

                <el-table-column align="center" prop="age" label="年龄">

                    <template scope="scope">

                        <el-form-item :prop="'list.' + scope.$index + '.age'" :rules="rules.age" v-if="scope.row.show">

                            <el-input size="mini" v-model="scope.row.age" placeholder="请输入" clearable>

                            </el-input>

                        </el-form-item>

                        <div v-if="!scope.row.show">{{scope.row.age}}</div>

                    </template>

                </el-table-column>

                <el-table-column align="center" prop="phone" label="联系方式">

                    <template scope="scope">

                        <el-form-item :prop="'list.' + scope.$index + '.phone'" :rules="rules.phone"

                            v-if="scope.row.show">

                            <!-- <el-form-item v-if="scope.row.show"> -->

                            <el-input size="mini" v-model="scope.row.phone" placeholder="请输入" clearable>

                            </el-input>

                        </el-form-item>

                        <div v-if="!scope.row.show">{{scope.row.phone}}</div>

                    </template>

                </el-table-column>

                <el-table-column label="操作" align="center" width="290" fixed="right">

                    <template slot-scope="scope">

                        <el-button type="text" style="color: #E6A23C;" @click="save(scope.$index, scope.row)"

                            v-if="scope.row.show" icon="el-icon-check">保存

                        </el-button>

                        <el-button type="text" style="color: #409EFF;" @click="edit(scope.row)" v-if="!scope.row.show"

                            icon="el-icon-edit">编辑

                        </el-button>

                        <el-button type="text" style="color: #67C23A;" v-if="scope.$index+1 == listLength"

                            @click="addRow(scope.$index, scope.row)" icon="el-icon-plus">新增

                        </el-button>

                        <el-button type="text" style="color: #F56C6C;" @click="delRow(scope.$index, scope.row)"

                            icon="el-icon-delete">删除

                        </el-button>

                        <el-button type="text" style="color: #909399;" @click="reset('form', scope.$index)"

                            v-if="scope.row.show" icon="el-icon-refresh">重置

                        </el-button>

                        <!-- <el-button type="text" style="color: #909399;" @click="resetRow(scope.row)"

                            v-if="scope.row.show" icon="el-icon-refresh">重置

                        </el-button> -->

                    </template>

                </el-table-column>

            </el-table>

        </el-form>

    </div>

</body>

</html>

<script>

    var app = new Vue({

        el: '#app',

        data() {

            return {

                // 表单数据

                form: {

                    // 表格数据

                    list: [{ id: 1, name: '', age: '', phone: '', show: true }]

                },

                // 表单验证规则

                rules: {

                    name: [{ required: true, message: '请输入姓名！', trigger: 'blur' }],

                    age: [{ required: true, message: '请输入年龄！', trigger: 'blur' }],

                    phone: [{ required: true, message: '请输入联系方式！', trigger: 'blur' }],

                },

                // 表格长度默认为 1

                listLength: 1,

            }

        },

        methods: {

            // 校验

            validateField(form, index) {

                let result = true;

                for (let item of this.$refs[form].fields) {

                    if (item.prop.split(".")[1] == index) {

                        this.$refs[form].validateField(item.prop, err => {

                            if (err != "") {

                                result = false;

                            }

                        });

                    }

                    if (!result) break;

                }

                return result;

            },

            // 重置【只针对校验字段】

            reset(form, index) {

                this.$refs[form].fields.forEach(item => {

                    if (item.prop.split(".")[1] == index) {

                        item.resetField();

                    }

                })

            },

            // 重置【全部】

            resetRow(row) {

                row.name = "";

                row.age = "";

                row.phone = "";

            },

            // 保存

            save(index, row) {

                if (!this.validateField('form', index)) return;

                row.show = false;

            },

            // 新增

            addRow(index, row) {

                if (!this.validateField('form', index)) return;

                this.form.list.push({

                    id: index + 2,

                    name: '',

                    age: '',

                    phone: '',

                    show: true

                });

                this.listLength = this.form.list.length;

            },

            // 编辑

            edit(row) {

                row.show = true;

            },

            // 删除

            delRow(index, row) {

                if (this.form.list.length > 1) {

                    this.form.list.splice(index, 1);

                    this.listLength = this.form.list.length;

                } else {

                    this.form.list = [{

                        id: 1,

                        name: '',

                        age: '',

                        phone: '',

                        show: true

                    }];

                }

            },

        }

    })

</script>




整理不易，给个赞呗~

elementUI表单嵌套表格并对每行进行校验的更多相关文章

  1. elementUI表单嵌套时间报错

    elementUI表单嵌套日期时间选择时间后报错 <el-form-item label="起始结束时间:" required prop="startime&quo ...

  2. Vue Element-ui表单校验规则，你掌握了哪些？

    1.前言   Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的.   我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则. ...

  3. 制作Html标签以及表单、表格内容

    制作Html一般用DW(......),Html全称为(Hyper Text Markup Language   超文本标记语言) 文本就是平常电脑上的文本文档,只能存储文字,而超文本文档可以存储音乐 ...

  4. 精通CSS+DIV网页样式与布局--设置表单和表格

    表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...

  5. Android程序员学WEB前端(3)-HTML(3)-表单嵌套-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522586觉得博文有用,请点赞,请评论,请关注,谢谢!~ 表单嵌套: <!DO ...

  6. jQuery 控制表单和表格

    这里总结了jQuery中对表格和表单的一些常用操作, 通过这里的实例和操作肯定对jQuery的掌握有一个新得提高, 希望大家耐心看完, 多实践. <!DOCTYPE html PUBLIC &q ...

  7. SNF快速开发平台MVC-各种级联绑定方式，演示样例程序（包含表单和表格控件）

    做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...

  8. Angular 表单嵌套、动态表单

    说明: 组件使用了ng-zorro (https://ng.ant.design/docs/introduce/zh) 第一类:嵌套表单 1. 静态表单嵌套 demo.component.html & ...

  9. elementUI表单验证

    elementUI表单验证非常方便,我们直奔主题: <template> <el-form ref="orderForm" :model="orderF ...

随机推荐

  1. Zookeeper【概述、安装、原理、使用】

    目录 第1章 Zookeeper入门 1.1 概述 1.2 特点 1.3 数据结构 1.4应用场景 第2章 Zookeep安装 2.1 下载地址 2.2 本地模式安装 1. 安装前准备 2. 配置修改 ...

  2. Linux学习 - 变量测试与内容替换

    变量置换方式 变量y没有设置 变量y为空 变量y有值 x=${y-新值} x=新值 x空 x=$y x=${y:-新值} x=新值 x=新值 x=$y x=${y+新值} x空 x=新值 x=新值 x ...

  3. dbeaver可视化工具-连接clickhouse

    下载地址 https://dbeaver.io/download/ 本次下载的是ZIP包,这种方式方便移动/备份软件 此软件可连接多种数据库,这里是连接clickhouse 新建连接 点击 上面的倒三 ...

  4. 【Linux】【Services】【Web】Nginx基础

    1. 概念 1.1. 消息通知机制:同步synchronous,异步asynchronous 同步:等待对方返回信息 异步:被调用者通过状态.通知或回调通知调用者 状态:调用者每隔一段时间就需要检查一 ...

  5. 6、Redis五大数据类型---列表(List)

    一.列表(List)简介 单键多值:Redis 列表是简单的字符串列表,按照插入顺序排序.你可以添加一个元素到列表的头部(左边)或者尾部(右边). 它的底层实际是个双向链表,对两端的操作性能很高,通过 ...

  6. Jsp/servlet分页五要素

    分页5要素: * 1)pageIndex 当前页 * 2)startIndex 从第几条数据开始 * 3)countAll 总条目数 * 4)pageSize 每页大小 * 5)pageCount 总 ...

  7. Gitlab-CICD实践篇

    一.背景 随着公司项目使用gitlab越来越多,业务发布的次数越来越频繁,对于发布效率提出了更高的要求.从2012开始,Gitlab官方开始集成了Continuous Integration (CI) ...

  8. 成本资源（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 张同学说,成本资源就是balabalabala--算了,反正就是一种资源,比如,张同学列出的差旅费.住宿费.交通费.通信费 ...

  9. AT2686 [ARC080A] 4-adjacent 题解

    Content 给定一个长度为 \(n\) 的数列 \(a\),请将其重新排列,使得 \(\forall i\in[1,n-1]\),都有 \(4\mid (a_i\cdot a_{i+1})\),或 ...

  10. 初识requests

    Make a Request 一开始要导入 Requests 模块: >>> import requests 然后,尝试获取某个网页.本例子中,我们来获取 Github 的公共时间线 ...