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. E面波导和H面波导的问题

    我感觉与窄壁平行是E面,反之为H面.通常E面(窄面)是指与电场方向平行的方向图切面(窄面):H面(宽面)是指与磁场方向平行的方向图切面(宽面).E面的意思是... ElevationH面的意思是... ...

  2. 编译安装nginx 1.16

    准备源码包,并解压,创建nginx用户 [root@slave-master ~]# tar xf nginx-1.16.0.tar.gz [root@slave-master ~]# useradd ...

  3. 『学了就忘』Linux启动引导与修复 — 74、Linux系统的修复模式（光盘修复模式）

    目录 1.光盘修复模式概念 2.光盘修复模式修复系统问题 (1)准备系统光盘 (2)进入BIOS (3)修改BIOS的启动顺序 (4)进入光盘修复模式 (5)修复系统 (6)修复系统实操 (7)总结 ...

  4. 接下来一段时间会对大家进行网络通信的魔鬼训练-理解socket

    引子 下一篇标题是<深入理解MQ生产端的底层通信过程>,建议文章读完之前.或者读完之后,再读一遍我之前写的<RabbitMQ设计原理解析>,结合理解一下. 我大学时流行过一个韩 ...

  5. 【JAVA今法修真】 第二章 一气化三清 线程分心念

    这是我的微信公众号,希望有兴趣的朋友能够一起交流,也希望能够多多支持新人作者,你的每一份关注都是我写文章的动力:南橘ryc 天有八纪,地分九州,万法仙门与天道剑宗一并坐落在东北方通辽州. 与李小庚想象 ...

  6. python爬取实习僧招聘信息字体反爬

    参考博客:http://www.cnblogs.com/eastonliu/p/9925652.html 实习僧招聘的网站采用了字体反爬,在页面上显示正常,查看源码关键信息乱码,如下图所示: 查看网页 ...

  7. 【antd】表单-单页面多表单提交功能

    需求:多个表单,我想一起校验一起提交,比如这里的上下两个部分为两个组件,两个form表单 功能点:1.所有报表需通过校验 2.通过校验后提交并带入所有参数 核心问题:form表单的validateFi ...

  8. 0RAYS元旦招新赛

    一共有4道pwn题,题目不算难,但是挺考验调试能力的. pie 一个main函数就四次溢出... 第一次leak canary,第二次leak libc,第三次直接覆盖返回地址为one_gadgets ...

  9. 联盛德 HLK-W806 (九): 软件SPI和硬件SPI驱动ST7789V液晶LCD

    目录 联盛德 HLK-W806 (一): Ubuntu20.04下的开发环境配置, 编译和烧录说明 联盛德 HLK-W806 (二): Win10下的开发环境配置, 编译和烧录说明 联盛德 HLK-W ...

  10. Table.ReorderColumns移动…Reorder…（Power Query 之 M 语言）

    数据源: 至少两列 目标: 列顺序重新排列 操作过程: 选取待移动的列>鼠标拖放列标题 选取待移动的列>[转换]>[移动]>选取 M公式:  = Table.ReorderCo ...