vue element 动态生成表单-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue element 动态生成表单。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

场景：表单中的项是由后端返回的，不是前端提前定义好的。

      <el-form :model="form" ref="form" :rules="rules" v-if="configLabelData">
        <el-form-item
          v-for="(item, index) in configLabelData"
          :key="index"
          :label="item.name + ':'"
          label-width="120px"
          :prop="item.configKey"
        >
              <el-checkbox-group v-model="form[item.configKey]">
                <el-checkbox
                  v-for="(_item, _index) in item.values"
                  :key="_index"
                  :label="_item.value"
                  class="form-item"
                  >{{ _item.name }}
                  </el-checkbox>
              </el-checkbox-group>
        </el-form-item>
      </el-form>

需要注意的点：

1、因为表单上需要绑定v-model来获取此表单项的值，但是要绑的值名称是根据后端数据来的，所以请求回来后端的数据后再渲染整个表单，否则会报错【v-if="configLabelData"】，根据请求到的后端数据动态创建form中的属性

          // 请求后赋值【此时已经请求到了后端返回的数据configLabelData】
          // 动态往表单中添加对应属性及数据
          for (let i = 0; i < this.configLabelData.length; i++) {
            let value;
            // 根据后端返回的数据类型显示赋值不同的类型
            if (this.configLabelData[i].type === "radiobox") {
              // radiobox类型绑定的值是字符串
              //【row[xxx] || "表示：从表格中拿到值用来回显，若没有值则赋新的空值】
              value = row[this.configLabelData[i].configKey] || "";
            }
            // 创建表单项，用于绑定数据
            this.$set(this.form, this.configLabelData[i].configKey, value);
            this.$nextTick(() => {
              this.$refs["form"].clearValidate();
            });
          }

2、渲染多个checkbox或者radio时，label绑定值，{{}}中渲染名称，这样v-model拿到的数据可以直接传到后端

3、对动态生成的表单做校验，提前定义好各种数据类型的校验规则：

在data中定义了多选和单选的校验规则：

      radioValidator: [
        {
          required: true,
          message: "请选择其中一种",
          trigger: "change",
        },
      ],
      checkboxValidator: [
        {
          type: "array",
          required: true,
          message: "至少选择一种",
          trigger: "change",
        },
      ],

在第1步创建表单项的时候同时更新rules

          // 请求后赋值【此时已经请求到了后端返回的数据configLabelData】
          // 动态往表单中添加对应属性及数据
          for (let i = 0; i < this.configLabelData.length; i++) {
            let validatorType;
            // 根据后端返回的数据类型添加不同的校验规则
            if (this.configLabelData[i].type === "checkbox") {
              validatorType = this.checkboxValidator;
            } 
            // 创建表单项，用于绑定数据
             this.$set(this.rules, this.configLabelData[i].configKey, validatorType);
          }

举个例子~后端返回数据格式：

vue动态表单,element ui,vue,vue.js,element ui