快捷導(dǎo)航

el-table樹(shù)形表格表單驗(yàn)證(列表生成序號(hào))

更新時(shí)間：2020年05月31日 16:04:10 作者：j_bleach

這篇文章主要介紹了el-table樹(shù)形表格表單驗(yàn)證(列表生成序號(hào))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

樹(shù)形表格表單驗(yàn)證預(yù)覽

樹(shù)形列表生成序號(hào)

首先需要生成一個(gè)序號(hào)用來(lái)確定表單驗(yàn)證的目標(biāo)row，通過(guò)廣度優(yōu)先遍歷，以1，1.1，1.1.1的規(guī)則對(duì)樹(shù)形列表生成確定唯一值的索引，因?yàn)榱斜碜陨砜梢宰鯟URD，因此需要每次列表的item增加或減少時(shí)重新調(diào)用生成索引的方法。

 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: "上海市普陀區(qū)金沙江路 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: "上海市普陀區(qū)金沙江路 1517 弄",
          children: []
        },
       ]
 setIndex(rows)

表單校驗(yàn)

要想實(shí)現(xiàn)對(duì)表格的表單驗(yàn)證，需要用form-item將整個(gè)表格包裹，然后在以子集的方式將每一列用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>

實(shí)現(xiàn)方式，表單校驗(yàn)本質(zhì)是對(duì)于目標(biāo)數(shù)據(jù)的路徑查找，當(dāng)el-form-item 上的prop匹配不到正確的目標(biāo)是的時(shí)候就不能正常觸發(fā)校驗(yàn)

因此，需要記錄每一個(gè)row上面的屬性路徑，即實(shí)現(xiàn)記錄每一行中屬性（name，address）路徑的方法。

 getPathByKey = (value, key, arr) => {
        let temppath = [];
        let realPath = ""
        try {
          function getNodePath(node) {
            temppath.push(node.currentIndex);
            //找到符合條件的節(jié)點(diǎn)，通過(guò)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]);
              }

              //當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)遍歷完依舊沒(méi)找到，則刪除路徑中的該節(jié)點(diǎn)
              temppath.pop();
            } else {

              //找到葉子節(jié)點(diǎn)時(shí)，刪除路徑當(dāng)中的該葉子節(jié)點(diǎn)
              temppath.pop();
            }
          }

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

將每一列需要驗(yàn)證的item，路徑查找好之后，form就可以具體監(jiān)控到所有的表格輸入，并觸發(fā)正確的驗(yàn)證了，如圖：

demo參考

到此這篇關(guān)于el-table樹(shù)形表格表單驗(yàn)證(列表生成序號(hào))的文章就介紹到這了,更多相關(guān)el-table樹(shù)形表格表單驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: