vue动态多级表单增删改查及校验

时间 2020-06-15

标签 vue 动态多级表单增删校验栏目 HTML 繁體版

原文原文链接

了解项目需求，构建基本html+ css

项目需求是: 能够添加不少标准，一条标准里有不少要点，对其进行输入，打分等功能，每条要点能够进行删除，每条大的标准能够进行删除，点击提交对每项进行校验，成品是下图： css

寻找合适的element ui框架，学会高效复制粘贴~.~ 节约时间

element ui提供了动态增减表单项，可是只有一层，咱们的数据须要进行多层级遍历渲染，不是很符合需求，因此须要本身写；分为建立和编辑，咱们这里只说建立部分。不管是一开始的添加、删除项目仍是添加、删除要点都还不涉及后台接口联调，纯前端操做。下面是基本布局html

<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);
},
复制代码

添加评分要点或者添加评分项目（判断下是添加一个要点仍是一个评分项目）ui

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
    });
  }
}
复制代码

重点来了，表单校验！！！

简单的操做以后，要进行提交，对表单全部项进行校验。怎么对屡次循环渲染的数据进行校验呢？下面的几步是关键，看截图：this

标注1的地方是第一层循环和他的校验规则，对他进行校验须要的语法是  
:ref="'任意名'+index"  (必定要有:，由于是变量)

标注2的地方是第二层循环他的校验规则，对他进行校验须要的语法是
:prop="'循环的数组名. ' +index+ ' .校验当前项的字段名'"
(这里要注意!!! 循环的数组名后面必定要加 . , 校验当前项的字段名就是下面input中v-model绑定的值,前面必定要加 . 。)
复制代码

若是前面循环书写不存在问题，下面就进行点击提交校验lua

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"
            });
        });
}
复制代码

至此多层级循环表单的校验就成功啦~.~，若是还有疑问，请百度或者删了再敲一遍，由于我这里是没有问题的！一块儿努力哈！spa