vue项目中动态生成form表单

在项目中经常遇到动态生成表单的需求，这次打算记录下来。在我的这次项目(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);
          }
        });
      }
    }

最后，再见啦！