首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript Vue.js

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

Posted in Vue.js onFebruary 18, 2022

效果展示

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

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

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

代码链接

gitee地址

关键代码

表格数据

// 数据格式必须是【对象嵌套数组】，【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. 添加字段校验的时候，格式必须写成这样的 :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. 表单的字段对象存在于 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;
}

重置方法

// 对【需要校验】的表单字段进行重置
// 参数同校验方法，如果是全部重置
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表单嵌套表格并对每行进行校验详解

- Author -

看花吃酒

- Original Sources -

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Vue.js 相关文章推荐
如何实现vue的tree组件
Dec 03 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue项目支付功能代码详解
Feb 18 #Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 #Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 #Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 #Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 #Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 #Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 #Vue.js
AE3805(1) PR-D3L(1) CPU(2) 爱尔兰购物网站(30) 德生1994(1) 天梯图(1) SLi Minor 2020(63) ICF-F10(1) 纸巾盒(1) 德生G88(1)
You might like
PHP CURL与java http使用方法详解
2018/01/26 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
ES6新特性四：变量的解构赋值实例
2017/04/21 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
ebookers英国：隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
学生党员思想汇报
2013/12/28 职场文书
技术合作协议书范本
2014/04/18 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
介绍信的格式
2015/01/30 职场文书
画展邀请函
2015/01/31 职场文书
财务管理制度范本
2015/08/04 职场文书
职工宿舍管理制度
2015/08/05 职场文书
军训决心书范文
2015/09/22 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
游戏《东方异文石：爱亚利亚黎明》正式版发布
2022/04/03 其他游戏