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之HTMLCollection接口代码
Apr 27 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
浅谈js中对象的使用
Aug 11 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
JS实现canvas简单小画板功能
Jun 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python自动发邮件脚本
2017/03/31 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
python 实现矩阵填充0的例子
2019/11/29 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
幼儿园中秋节活动方案2013
2014/01/29 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
党课培训主持词
2014/04/01 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
解除劳动合同证明书
2014/09/26 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
蜗居观后感
2015/06/11 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis