Understand the requirements of the project and build basic HTML + CSS
The requirements of the project are as follows: many standards can be added. There are many key points in a standard, which can be input and scored. Each key point can be deleted, and each large standard can be deleted.
Find the right Element UI framework and learn to copy and paste efficiently to save time
Element UI provides dynamic addition and subtracting of form items, but with only one layer, our data needs to be rendered in multiple layers, which is not very satisfying, so we need to write our own; Divided into create and edit, we will only talk about the create part here. No matter at the beginning of adding and deleting items or adding and deleting points, it does not involve background interface joint adjustment, pure front-end operation. Here is the basic layout
The < div > < div class = "standradList" > < span > evaluation criteria: < / 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=" score item :" prop="ItemName" :rules="{required: true, message: 'Please enter the scoring item ', trigger: 'blur' }" > <el-input v-model="item.ItemName" maxlength="30"></el-input> </el-form-item> <div class="form_one" EvaluationPointList v-for="(items,ind) in item.evaluationPointList ":key="ind" <el-form-item label=" import_point" :prop="'EvaluationPointList.'+ind+'.pointdetail '" :rules="{required: true, message: 'please input EvaluationPointList ', trigger: 'blur' }" > <el-input type="textarea" autosize v-model="items.PointDetail" maxlength="30"></el-input> </el-form-item> Import_num "label-width="60px" :prop="'EvaluationPointList.'+ind+'.score '" :rules="{ Required: true, message: 'Please enter score ', 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 > delete < / 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" > + add score points < / el - button > < / el - form > < span class = "spanError" V - if = "obj. EvaluationItemParamDTO. Length > 1" @ click = "called deleteItem (index)" > x < / 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] </el-button> <div class="validateForm" style="margin: 50px 0 50px 7%; text-align: right; padding-right: 1%;" "> < span style="color: # FFF; background: #409EFF;" </el-button> </div> </div>Copy the codeAlthough it is created dynamically, we provide a form box at the beginning, which is used to add, delete, change, and check. Here are the variables and values bound to data initialization:
data() {
return {
obj: {
EvaluationTemplateEntity: {
TotalScore: 100,
TemplateName: "",
CreateUserId: "",
GradeId: "",
SubjectId: ""
},
EvaluationItemParamDTO: [
{
ItemName: "",
SortCode: 1,
EvaluationPointList: [
{
PointDetail: "",
Score: "",
SortCode: "1"
}
]
}
]
}
};
}
Copy the codeI have confirmed the data format with the background (later it involves rendering the page when editing), so the data format had better be unified, which will be much more convenient
Delete a scoring point
deleteItems(index, Ind) {/ / here we need to send it according to the value of the know which score delete project which score points in this. Obj. EvaluationItemParamDTO [index] EvaluationPointList. ForEach ((item, indx) => { if (indx == ind) { this.obj.EvaluationItemParamDTO[index].EvaluationPointList.splice( ind, 1 ); }}); },Copy the codeDelete a scoring item
deleteItem(index) {
this.obj.EvaluationItemParamDTO.splice(index, 1);
},
Copy the codeAdd scoring points or scoring items (decide whether to add a scoring point or a scoring item)
AddItem (STR, ind, next) {if (STR = = "item") {/ / add score project this. Obj. EvaluationItemParamDTO. Push ({ItemName: "", SortCode: next + 1, EvaluationPointList: [ { PointDetail: "", Score: "", SortCode: next + 1 } ] }); } else if (STR == "items") {// add items to the list this.obj.EvaluationItemParamDTO[ind].EvaluationPointList.push({ PointDetail: "", Score: "", SortCode: next + 1 }); }}Copy the codeKey point, form verification!!
After a simple operation, submit and verify all the form items. How do you validate data that has been rendered multiple times? The following steps are key, look at the screenshot:
The syntax for checking it is :ref="' any name '+index" (it must have:, because it is a variable). The syntax for checking it is :ref=" any name "+index". The syntax needed to verify it is :prop="' array name of the loop. '+index+'. Validates the field name of the current item. The array name of the loop must be followed by a.. The field name used to validate the current item is the value of the V-model binding in the input below.Copy the codeIf there is no problem with the previous loop writing, click submit verification is performed
SubmitStand () {let newArr = []; let _self = this; this.obj.EvaluationItemParamDTO.forEach((item, index) => { checkForm("objs" + index); // objs is where the first loop checks (:ref=' objs' +index'), be sure to write the same}); 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); }); }) goldbach = goldbach = goldbach = goldbach = goldbach = goldbach = goldbach = goldbach = goldbach = goldbach $message({message: "operation failed ", type: "error"}); }); }Copy the codeSo far the multi-level circular form verification is successful ~.~, if there is any doubt, please Baidu or delete to knock again, because I have no problem here! Let’s work together!