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 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
javascript 面向对象编程基础 多态
Aug 21 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 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 表单数据的获取代码
2009/03/10 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
Python中统计函数运行耗时的方法
2015/05/05 Python
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
利用python开发app实战的方法
2019/07/09 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
小学三年级数学教学反思
2014/01/31 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
考察现实表现材料
2014/05/19 职场文书
医德医魂心得体会
2014/09/11 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
2015年征兵工作总结
2015/07/23 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
nginx七层负载均衡配置详解
2022/07/15 Servers