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 은 모든 표 의 입력 을 구체 적 으로 감시 하고 정확 한 검증 을 촉발 할 수 있 습 니 다.그림 과 같 습 니 다.

데모 참조
여기 서 엘-table 트 리 표 폼 검증(목록 생 성 번호)에 관 한 글 을 소개 합 니 다.더 많은 엘-table 트 리 표 폼 검증 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!