vue项目中动态生成form表单

#vue项目中动态生成form表单| 来源: 网络整理| 查看: 265

在项目中经常遇到动态生成表单的需求，这次打算记录下来。在我的这次项目(vue+element)中，有这样一个需求。类似于 (a || b && c) || ((a || b) && c) && (a || b) 这样的表达式，动态生成且和或组成的逻辑关系。具体的还是看图吧

绿色框是一个大组，里面可以无限地添加或和且关系的表达式。粉色框是一个小组，里面是一个form表单，也是指一组表达式。选择绿色框里的 "请选择逻辑条件"下拉框，下拉数据是 "且" 和 "或"，然后点击添加，这时候是在大组里面添加一个小组，即添加了一个粉色框里的内容。选择黄色框里的下拉框，点击添加，添加的是一个大组。第二个绿色框就是选择了黄色框里的"或"条件添加的。点击小组内的"删除"按钮，就是将粉色框里的内容删除，点击"删除所有条件"按钮就是将整个大组删除，即删除绿色框的内容。大概的操作就是这样的，里面的业务我就不介绍了。在这里只介绍一下动态生成表单，接下来就是码代码的时候了。

或且或且删除添加删除所有条件添加

这是HTML部分的代码，下面是在data中定义的数据

conditionGroupList: [ { groupKey: 1, groupParamLogical: "PARAM_LOGICAL_AND", isFirstGroup: true, conditionList: [{ conditonKey: "", // 属性下拉数据 formTypeList: [], formId: "", paramType: "", paramCompare: "", conditionValue: null, // 条件逻辑运算符 paramLogical: "PARAM_LOGICAL_AND", isFirstParam: true }], // 组内(绿色框内)逻辑运算按钮 // (定义这个变量是为了防止新增条件组时，组内的逻辑选择框被赋值为添加组逻辑条件的值) selectParamLogicalButton: "" } ], // 组外(黄色框)的逻辑运算或且的值 groupParamLogical: "",

html代码和数据对应起来就知道里面绑定的数据的意义了，我就不啰嗦啦。接下来是添加和删除的方法，写在methods里面。

// 添加一个大组的方法 addOrConditions() { if (this.groupParamLogical) { this.conditionGroupList.push({ groupKey: this.conditionGroupList.length === 0 ? 1 : ++this.afterKey, conditionList: [{ conditonKey: "", formTypeList: [], formId: "", paramType: "", paramCompare: "", conditionValue: null, // 条件逻辑运算符 paramLogical: "PARAM_LOGICAL_AND", isFirstParam: true }], groupParamLogical: this.groupParamLogical, isFirstGroup: this.conditionGroupList.length === 0 ? true : false }); this.groupParamLogical = ""; } else { this.$message.warning("请先选择逻辑条件"); } }, // 删除一个大组的所有条件 deleteAllConditions(index) { this.conditionGroupList.splice(index, 1); }, // 新增一个小组 addConditions(index) { if (this.conditionGroupList[index].selectParamLogicalButton) { this.conditionGroupList[index].conditionList.push({ conditonKey: "", formTypeList: [], formId: "", paramType: "", paramCompare: "", conditionValue: null, paramLogical: this.conditionGroupList[index].selectParamLogicalButton, isFirstParam: this.conditionGroupList[index].conditionList.length === 0 ? true : false }); this.conditionGroupList[index].selectParamLogicalButton = ""; } else { this.$message.warning("请先选择逻辑条件"); } }, // 删除一个小组 deleteConditions(item, index) { item.conditionList.splice(index, 1); // 如果删除小组条件后，这个大组没有条件了，那么这个大组也要删除掉 if (item.conditionList.length === 0) { this.conditionGroupList.forEach((v, i) => { if (item.groupKey === v.groupKey) { this.conditionGroupList.splice(i, 1); } }); } }

最后，再见啦！

【本文地址】

公司简介

联系我们