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 相关文章推荐
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 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(8) php 数组
2010/03/05 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
跟老齐学Python之print详解
2014/09/28 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
Python3分析处理声音数据的例子
2019/08/27 Python
Python上下文管理器全实例详解
2019/11/12 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
老师自我鉴定范文
2013/12/25 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript
tomcat下部署jenkins的方法
2022/05/06 Servers
app场景下uniapp的扫码记录
2022/07/23 Java/Android