广州证券

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

 更新时间:2020年05月31日 16:04:10   转载 作者:j_bleach  
这篇文章主要介绍了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匹配不到正确的目标是的时候就不能正常触发校验


因此,需要记录每一个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树形表格表单验证(列表生成序号)的文章就介绍到这了,更多相关el-table树形表格表单验证内容请搜索脚本之家以前的文章或继续浏览下面的广州证券相关的文章希望大家以后多多支持脚本之家!

广州证券相关的文章

  • 在vue+element ui框架里实现lodash的debounce防抖

    在vue+element ui框架里实现lodash的debounce防抖

    今天小编就为大家分享一篇在vue+element ui框架里实现lodash的debounce防抖,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue中本地静态图片路径写法

    vue中本地静态图片路径写法

    这篇文章给大家介绍了vue中本地静态图片路径写法及Vue.js中引用图片路径的方式,需要的朋友参考下吧
    2018-03-03
  • vue 2.x 中axios 封装的get 和post方法

    vue 2.x 中axios 封装的get 和post方法

    本文通过实例代码给大家介绍了vue 2.x 中axios 封装的get 和post方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-02-02
  • vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

    vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

    这篇文章主要介绍了vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理,需要的朋友可以参考下
    2017-03-03
  • 详解Axios统一错误处理与后置

    详解Axios统一错误处理与后置

    这篇文章主要介绍了详解Axios统一错误处理与后置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue+axios实现post文件下载

    vue+axios实现post文件下载

    这篇文章主要为大家详细介绍了vue+axios实现post文件下载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue实现todolist基本功能以及数据存储功能实例详解

    vue实现todolist基本功能以及数据存储功能实例详解

    本文通过实例代码给大家介绍了vue实现todolist基本功能以及数据存储功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)

    详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)

    这篇文章主要介绍了Vue+ElementUI从零开始搭建自己的网站(一、环境搭建),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 全面解析vue router 基本使用(动态路由,嵌套路由)

    全面解析vue router 基本使用(动态路由,嵌套路由)

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。这篇文章主要介绍了vue router 基本使用 ,需要的朋友可以参考下
    2018-09-09
  • vue element项目引入icon图标的方法

    vue element项目引入icon图标的方法

    这篇文章主要介绍了vue element项目引入icon图标的方法,本文图文并茂给大家介绍的非常详细,需要的朋友可以参考下
    2018-06-06

最新评论

深高CWB1(580014)

上汽CWB1(580016)

赣粤CWB1(580017)

石化CWB1(580019)

上港CWB1(580020)

青啤CWB1(580021)

国电CWB1(580022)

康美CWB1(580023)

宝钢CWB1(580024)

葛洲CWB1(580025)