vue動態多級表單增刪改查及校驗

瞭解項目需求，構建基本html+ css

項目需求是: 能夠添加不少標準，一條標準裏有不少要點，對其進行輸入，打分等功能，每條要點能夠進行刪除，每條大的標準能夠進行刪除，點擊提交對每項進行校驗，成品是下圖：

尋找合適的element ui框架，學會高效複製粘貼~.~ 節約時間

element ui提供了動態增減表單項，可是隻有一層，咱們的數據須要進行多層級遍歷渲染，不是很符合需求，因此須要本身寫；分爲建立和編輯，咱們這裏只說建立部分。 不管是一開始的添加、刪除項目仍是添加、刪除要點都還不涉及後臺接口聯調，純前端操做。下面是基本佈局

<div>
    <div class="standradList">
        <span>評課標準:</span>
        <div class="productList" v-if="obj.EvaluationItemParamDTO.length!=0">
          <div class="list" v-for="(item,index) in obj.EvaluationItemParamDTO" :key="index">
            <el-form :ref="'objs'+index" :model="item" label-width="100px">
              <el-form-item
                label="評分項目:"
                prop="ItemName"
                :rules="{ required: true, message: '請輸入評分項目', trigger: 'blur' }"
              >
                <el-input v-model="item.ItemName" maxlength="30"></el-input>
              </el-form-item>
              <div class="form_one" v-for="(items,ind) in item.EvaluationPointList" :key="ind">
                <el-form-item
                  label="評分要點:"
                  class="import_point"
                  :prop="'EvaluationPointList.'+ind+'.PointDetail'"
                  :rules="{ required: true, message: '請輸入評分要點', trigger: 'blur' }"
                >
                  <el-input type="textarea" autosize v-model="items.PointDetail" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item
                  label="分數:"
                  class="import_num"
                  label-width="60px"
                  :prop="'EvaluationPointList.'+ind+'.Score'"
                  :rules="{ required: true, message: '請輸入分數', trigger: 'blur' }"
                >
                  <el-input
                    v-model="items.Score"
                    type="number"
                    oninput="if(value.length>4)value=value.slice(0,4)"
                  ></el-input>
                </el-form-item>
                <label style="color:#606266;font-size:14px;padding-left:6px">分</label>
                <el-button
                  class="del"
                  @click="deleteItems(index,ind)"
                  v-if="item.EvaluationPointList.length>1"
                  size="mini"
                  plain
                >刪除</el-button>
              </div>
              <el-button
                size="mini"
                style="margin-left: 9.6%;color:#409EFF;border:1px solid #409EFF"
                @click="addItem('items',index,item.EvaluationPointList[item.EvaluationPointList.length-1].SortCode)"
                :disabled="item.EvaluationPointList.length>4"
              >+添加評分要點</el-button>
            </el-form>
            <span
              class="spanError"
              v-if="obj.EvaluationItemParamDTO.length>1"
              @click="deleteItem(index)"
            >×</span>
          </div>
        </div>
        <el-button
          style="width:200px;margin-left: 7%;color: #fff;background: #409EFF;"
          v-if="obj.EvaluationItemParamDTO.length<10"
          @click="addItem('item',obj.EvaluationItemParamDTO.length,obj.EvaluationItemParamDTO[obj.EvaluationItemParamDTO.length-1].SortCode)"
        >+添加評課項目</el-button>
      </div>
      <div class="validateForm" style="margin: 50px 0 50px 7%;text-align: right;padding-right: 1%;">
        <el-button @click="clearAll">取消</el-button>
        <el-button @click="submitStand" style="color: #fff;background: #409EFF;">提交</el-button>
      </div>
  </div>
複製代碼

雖然是動態建立，可是咱們一開始提供了一個表單框，用於進行增刪改查，下面是data初始化時綁定的變量及值:

data() {
    return {
      obj: {
        EvaluationTemplateEntity: {
          TotalScore: 100,
          TemplateName: "",
          CreateUserId: "",
          GradeId: "",
          SubjectId: ""
        },
        EvaluationItemParamDTO: [
          {
            ItemName: "",
            SortCode: 1,
            EvaluationPointList: [
              {
                PointDetail: "",
                Score: "",
                SortCode: "1"
              }
            ]
          }
        ]
      }
    };
}
複製代碼

我這裏是和後臺確認的數據格式（後面涉及到編輯時要渲染頁面），因此數據格式最好統一，會方便不少

刪除某個評分要點

deleteItems(index, ind) {
  //在這裏咱們須要根據傳過來的值知道刪的是哪一個評分項目裏的哪條評分要點
  this.obj.EvaluationItemParamDTO[index].EvaluationPointList.forEach(
    (item, indx) => {
      if (indx == ind) {
        this.obj.EvaluationItemParamDTO[index].EvaluationPointList.splice(
          ind,
          1
        );
      }
    }
  );
},
複製代碼

刪除某條評分項目

deleteItem(index) {
  this.obj.EvaluationItemParamDTO.splice(index, 1);
},
複製代碼

添加評分要點或者添加評分項目（判斷下是添加一個要點仍是一個評分項目）

addItem(str, ind, next) {
  if (str == "item") { //添加評分項目
    this.obj.EvaluationItemParamDTO.push({
      ItemName: "",
      SortCode: next + 1,
      EvaluationPointList: [
        {
          PointDetail: "",
          Score: "",
          SortCode: next + 1
        }
      ]
    });
  } else if (str == "items") {//添加評分要點
    //根據傳值知道是那個評分項目裏要添加評分要點
    this.obj.EvaluationItemParamDTO[ind].EvaluationPointList.push({
      PointDetail: "",
      Score: "",
      SortCode: next + 1
    });
  }
}
複製代碼

重點來了，表單校驗！！！

簡單的操做以後，要進行提交，對錶單全部項進行校驗。怎麼對屢次循環渲染的數據進行校驗呢？下面的幾步是關鍵，看截圖：

標註1的地方是第一層循環和他的校驗規則，對他進行校驗須要的語法是  
:ref="'任意名'+index"  (必定要有:，由於是變量)

標註2的地方是第二層循環他的校驗規則，對他進行校驗須要的語法是
:prop="'循環的數組名. ' +index+ ' .校驗當前項的字段名'"
(這裏要注意!!! 循環的數組名後面必定要加 . , 校驗當前項的字段名就是下面input中v-model綁定的值,前面必定要加 . 。)
複製代碼

若是前面循環書寫不存在問題，下面就進行點擊提交校驗

submitStand() {
  //標紅提示未填項
    let newArr = []; 
    let _self = this;
    this.obj.EvaluationItemParamDTO.forEach((item, index) => {
        checkForm("objs" + index); //這裏的objs就是第一層循環要校驗的那裏（:ref='"objs"+index'），必定要寫同樣的
    });
    function checkForm(arrName) {
        var result = new Promise(function(resolve, reject) {
             _self.$refs[arrName][0].validate(valid => {
                if (valid) {
                    resolve();
                } else {
                    reject();
                }
            });
        });
        newArr.push(result);
    }
    Promise.all(newArr)
        .then(function() {
            setTimeout(function() {
                let sums = 0;
                _self.obj.EvaluationItemParamDTO.forEach((item, index) => {
                    item.EvaluationPointList.forEach((items, ind) => {
                        sums += Number(items.Score);
                    });
                })
                if(sums==100){
                    //這裏是判斷成功以後的事件
                }else{
                    //這裏是判斷失敗的提示
                     _self.$message.error("總分有誤，請從新設置")
                }
            }, 500);
        })
        .catch(function() { //捕捉異常
            _self.$message({
            message: "操做失敗",
            type: "error"
            });
        });
}
複製代碼

至此多層級循環表單的校驗就成功啦~.~， 若是還有疑問，請百度或者刪了再敲一遍，由於我這裏是沒有問題的！一塊兒努力哈！