el-table树形表格表单验证(列表生成序号)


Posted in Javascript onMay 31, 2020

树形表格表单验证预览

el-table树形表格表单验证(列表生成序号)

树形列表生成序号

首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因此需要每次列表的item增加或减少时重新调用生成索引的方法。

setIndex = (data) => {
        let queue = [...data];
        let loop = 0;
        while (queue.length > 0) {
          loop++
          [...queue].forEach((child, i) => {
            queue.shift()
            if (loop == 1) {
              child.customIndex = i + 1 + "";
              child.currentIndex = i;
            }
            if (child.children && child.children.length > 0) {
              child.dataType = 1
              for (let ci = 0; ci < child.children.length; ci++) {
                child.children[ci].currentIndex = ci
                child.children[ci].customIndex = child.customIndex + "." + (ci + 1)
              }
              queue.push(...child.children)
            } else {
              child.dataType = 2
            }
          })
        }
      }
      const rows = [
        {
          id: "1",
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 弄",
          children: [
            {
              name: "233",
              customIndex: "1.1",
              children: [{name: "9"}]
            },
            {
              name: "7771",
              customIndex: "1.2",
              children: [
                {
                  name: "9"
                }, 
                {
                  name: "9",
                }]
            }
          ]
        },
        {
          id: "2",
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1517 弄",
          children: []
        },
       ]
 setIndex(rows)

表单校验

要想实现对表格的表单验证,需要用form-item将整个表格包裹,然后在以子集的方式将每一列用form-item包裹。

<el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label-width="0" prop="rows">
        <el-table>
        </el-table>
      </el-form-item>
    </el-form>
<el-table-column
              prop="name"
              label="姓名"
              sortable
              width="180">
            <template v-slot="{$index, row}">
                           {{`rows${getPathByKey(row.customIndex,"customIndex",form.rows)}.name`}}
              <el-form-item label-width="0" :rules="rules.name"
                     :prop="`${row.customIndex!=='tempIndex'?`rows${getPathByKey(row.customIndex,'customIndex',form.rows)}.name`:''}`">
                <el-input v-model="row.name"></el-input>
              </el-form-item>
            </template>
          </el-table-column>

实现方式,表单校验本质是对于目标数据的路径查找,当el-form-item 上的prop匹配不到正确的目标是的时候就不能正常触发校验

el-table树形表格表单验证(列表生成序号)

因此,需要记录每一个row上面的属性路径,即实现记录每一行中属性(name,address)路径的方法。

getPathByKey = (value, key, arr) => {
        let temppath = [];
        let realPath = ""
        try {
          function getNodePath(node) {
            temppath.push(node.currentIndex);
            //找到符合条件的节点,通过throw终止掉递归
            if (node[key] === value) {
              temppath.forEach((v, i) => {
                if (i == 0) {
                  realPath += "." + v
                } else {
                  realPath += `.children.${v}`
                }
              })
              // temppath = temppath.join(",")
              throw ("GOT IT!");
              // return;
            }
            if (node.children && node.children.length > 0) {
              for (var i = 0; i < node.children.length; i++) {
                getNodePath(node.children[i]);
              }

              //当前节点的子节点遍历完依旧没找到,则删除路径中的该节点
              temppath.pop();
            } else {

              //找到叶子节点时,删除路径当中的该叶子节点
              temppath.pop();
            }
          }

          for (let i = 0; i < arr.length; i++) {
            getNodePath(arr[i]);
          }
        } catch (e) {
          return realPath;
        }
      },

将每一列需要验证的item,路径查找好之后,form就可以具体监控到所有的表格输入,并触发正确的验证了,如图:

el-table树形表格表单验证(列表生成序号)

demo参考

到此这篇关于el-table树形表格表单验证(列表生成序号)的文章就介绍到这了,更多相关el-table树形表格表单验证内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 #Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 #Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 #Javascript
公众号SVG动画交互实战代码
May 31 #Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 #Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 #Javascript
详解Typescript 内置的模块导入兼容方式
May 31 #Javascript
You might like
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
PHP 第一节 php简介
2012/04/28 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
python修改操作系统时间的方法
2015/05/18 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
中职生自我鉴定范文
2013/10/03 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
初三开学计划书
2014/04/27 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
搞笑老公保证书
2015/02/26 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android