vue项目中动态生成form表单

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

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

      <template v-if="conditionGroupList.length !== 0">
        <div v-for="(item, index) in conditionGroupList"
              :key="index">

          <el-row>
            <el-col 
              :span="24" 
              v-if="item.groupParamLogical === 'PARAM_LOGICAL_OR' &&
              index !== 0" 
              class="conditions_padding">或</el-col>
            <el-col 
              :span="24" 
              v-if="item.groupParamLogical === 'PARAM_LOGICAL_AND' &&
              index !== 0" 
              class="conditions_padding">且</el-col>
          </el-row>
          
          <el-form label-position="right" 
                    label-width="100px"
                    class="group"
                    :model="item">
            <el-row
              class="right"
              v-for="(itemLevel,index) in item.conditionList" 
              :key="index">
              <el-col 
                :span="24" 
                v-if="itemLevel.paramLogical === 'PARAM_LOGICAL_OR' &&
                index !== 0" 
                class="conditions_padding">或</el-col>
              <el-col 
                :span="24" 
                v-if="itemLevel.paramLogical === 'PARAM_LOGICAL_AND' &&
                index !== 0"
                class="conditions_padding">且</el-col>
              <el-col :span="8" class="conditionsStyle">
                <el-form-item label="表单">
                  <el-select v-model="itemLevel.formId"
                              @change="selectFormNode(itemLevel)"
                              clearable
                              placeholder="请选择">
                    <el-option v-for="item in formNodeList"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="conditionsStyle">
                <el-form-item label="属性">
                  <el-select v-model="itemLevel.conditonKey"
                              clearable
                              placeholder="请选择">
                    <el-option v-for="item in itemLevel.formTypeList"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="conditionsStyle">
                <el-form-item label="条件">
                  <el-select v-model="itemLevel.paramCompare"
                            clearable
                            placeholder="请选择">
                    <el-option v-for="item in conditionsList"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="conditionsStyle">
                <el-form-item label="参数类型" label-width="100px">
                  <el-select v-model="itemLevel.paramType"
                              clearable
                              @change="selectParamType(itemLevel)"
                              placeholder="请选择">
                    <el-option v-for="item in paramTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="conditionsStyle">
                <el-form-item v-if="itemLevel.paramType === 'PARAM_TYPE_DATE'" label="值" label-width="100px">
                  <el-date-picker
                    v-model="itemLevel.conditionValue"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item v-else label="值" label-width="100px">
                  <el-input v-model="itemLevel.conditionValue"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4"
                      class="conditionsStyle">
                <el-button type="danger"
                          @click="deleteConditions(item, index)">
                  删除
                </el-button>
              </el-col>
            </el-row>
          </el-form>
          <el-row class="group">
            <el-col :span="5"
                    class="conditionsStyle bottom">
              <el-select v-model="item.selectParamLogicalButton"
                        clearable
                        placeholder="请选择逻辑条件">
                <el-option label="且条件"
                          value="PARAM_LOGICAL_AND"></el-option>
                <el-option label="或条件"
                          value="PARAM_LOGICAL_OR"></el-option>
              </el-select>
            </el-col>
            <el-col :span="4"
                    class="conditionsStyle bottom">
              <el-button @click="addConditions(index)"
                        type="primary">添加</el-button>
            </el-col>
            <el-col 
              :span="4"     
              class="conditionsStyle bottom">
              <el-button
                @click="deleteAllConditions(index)"
                v-if="conditionGroupList.length > 1 && item.conditionList.length !== 0"
                type="danger">删除所有条件</el-button>
            </el-col>
          </el-row>
        </div>      
      </template> 

      <el-row>
        <el-col :span="5"
                class="conditionsStyle bottom">
          <el-select v-model="groupParamLogical"
                    clearable
                    placeholder="请选择逻辑条件">
            <el-option label="且条件"
                      value="PARAM_LOGICAL_AND"></el-option>
            <el-option label="或条件"
                      value="PARAM_LOGICAL_OR"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4"
                class="conditionsStyle bottom">
          <el-button @click="addOrConditions"
                    type="primary">添加</el-button>
        </el-col>
      </el-row>

这是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);
          }
        });
      }
    }

最后，再见啦！