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

2024-11-01 22:04:19

效果展示

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

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

代码链接

关键代码

表格数据

// 数据格式必须是【对象嵌套数组】，【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 }
  ]
},

组件嵌套

添加字段校验的时候，格式必须写成这样的 :prop="'list.' + scope.$index + '.name'"
这是 elementui 规定的格式，渲染后的结果为 list.1.name
每个字段要动态绑定表单的 rules 属性
如果不是以上的格式，会出错！！！

// 表单必须嵌套在表格的外面，表单必须绑定【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>

校验方法

表单的字段对象存在于 this.$refs['form'].fields 中，并且字段对象具有 prop【datas.1.name】属性和 validateField 方法【验证 datas.1.name 能否通过校验】
但是 validateField 方法需要手动创建来验证能否通过校验
必须创建，否则会出错！！！

// 表单校验方法
// 【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;
}

重置方法

// 对【需要校验】的表单字段进行重置
// 参数同校验方法，如果是全部重置
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" rel="external nofollow" >
    <!-- 引入组件库 -->
    <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>

总结

到此这篇关于Vue elementUI表单嵌套表格并对每行进行校验的文章就介绍到这了,更多相关elementUI表单嵌套表格内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue elementUI 表单校验的实现代码（多层嵌套）

嵌套对象的校验项目中使用的vue+elementUI进行开发,已经用了有一段时间了,感觉表单校验是每一个前端开发人员都避免不了的需求.在一些前端可以自行校验的情况下,先通过前端校验,校验不通过不发送请求,直到满足校验规则,再发送请求给后端,从而提升用户体验. elementUI对表单的校验有自己的方法,要求传入model的必须为一个对象.但如果数据结构比较复杂,对象里面又嵌套对象,该如何校验?本文给出多层对象嵌套的方法. example <template> <el-form :mod
vue elementUI 表单嵌套验证的实例代码

一:表单一级验证 element中from组件内表单验证通过使用el-form标签,绑定model和rules属性进行表单验证 <el-form ref="form" :model="form" :rules="rules" label-width="110px" @submit.native.prevent> <el-form-item label="客户名称:" size="
vue elementUI 表单校验功能之数组多层嵌套

在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构: { "title":''123455, "email":'123456@qq.com', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ullamco", &quo
Vue elementUI表单嵌套表格并对每行进行校验详解

目录效果展示代码链接关键代码表格数据组件嵌套校验方法重置方法完整代码总结效果展示先看看这是不是需要的效果^_^ 如图,ElementUI 表单里嵌套了表格,表格内每行能进行[保存][新增][编辑][删除][重置]等操作,同时可以对每行的某些字段进行校验(而不是整个表单校验!),这种需求很常见,所以记录下来. 代码链接 gitee地址关键代码表格数据 // 数据格式必须是[对象嵌套数组],[form]绑定表单,[list]绑定表格 form: { // 表格数据 list
Vue Element-ui表单校验规则实现

目录 1.前言 2.规则校验的入门模式 2.1.示例代码 2.2.form项 2.3.prop项 2.4.rules项 2.5.rule项 2.6.使用规则 2.7.规则校验的核心 3.规则校验的进阶模式 3.1.嵌套对象属性名 3.2.自定义校验器validator 3.3.类型type 3.3.数据转换transform 3.4.数值范围Range 3.5.枚举值 3.6.正则Pattern 3.7.长度len 3.8.空白whitespace 3.9.i18n 4.规则校验的高级模式 4.
Vue+Element-ui表单resetFields无法重置问题

目录问题背景第一个无法解决重置表单解决方案第二个无法解决重置表单解决方案问题背景在开发中自己使用this.$refs[formName].resetFields()出现无法重置表单的的场景有两种: 1.<Modal/ >组件内表单填写,在 modal 组件未挂载在 DOM 元素中,就无法获取到 form 表单组件的实例,所以this.$refs[formName]获取实例就会出现 undefined 的情况. 2.比如编辑表格数据,需要回显表单数据,我们一般的做法就是放表单的 raw
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解

本文实例讲述了微信小程序学习笔记之表单提交与PHP后台数据交互处理.分享给大家供大家参考,具体如下: 前面一篇结介绍了微信小程序函数定义.页面渲染.这里介绍form表单提交与后台php数据交互处理. [form表单提交] form.wxml: <form bindsubmit="formSubmit" bindreset="formReset"> <view> 昵称:<input type="text" name=&
Java设置PDF跨页表格重复显示表头行的步骤详解

目录前言 1.导入Jar包 2.Java代码总结前言在创建表格时,如果表格内容出现跨页显示的时候,默认情况下该表格的表头不会在下一页显示,在阅读体验上不是很好.下面分享一个方法如何在表格跨页是显示表格的表头内容,这里只需要简单使用方法 grid.setRepeatHeader(true);即可. 具体参考如下方法步骤. 1.导入Jar包这里导入的是Free Spire.PDF for Java的jar包,Spire.PDF for Java 支持的功能非常丰富,例如 PDF 文档安全性
element 结合vue 在表单验证时有值却提示错误的解决办法

绑定的值与规则指定的值一定要相同------- 第一步: <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> 加上rules ref 第二部: <el-form-item label="活动名称" prop="na
策略模式实现 Vue 动态表单验证的方法

策略模式(Strategy Pattern)又称政策模式,其定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换.封装的策略算法一般是独立的,策略模式根据输入来调整采用哪个算法.关键是策略的实现和使用分离 . 注意:本文可能用到一些编码技巧比如 IIFE(Immediately Invoked Function Expression, 立即调用函数表达式),ES6 的语法 let/const.箭头函数.rest 参数,短路运算符等,如果还没接触过可以点击链接稍加学习 ~ 1. 你曾