成功vue动态表单支持多种控件

<template>
  <div class="app-container">
    <el-form
      :model="dynamicValidateForm"
      label-width="120px"
      ref="dynamicValidateForm"
    >
      <el-form-item
        :key="domain.name"
        :label="domain.label"
        :prop="domain.name"
        :rules="rules"
        v-for="domain in dynamicValidateForm.domains"
      >
        <el-input
          type="text"
          :disabled="domain.editable"
          autocomplete="off"
          v-model.number="domain.value"
          v-if="domain.type === 'text'"
        >
        </el-input>
        <el-input
          type="text"
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="9"
          :disabled="domain.editable"
          autocomplete="off"
          v-model.number="domain.value"
          v-if="domain.type === 'number'"
        ></el-input>
        <el-date-picker
          type="datetime"
          :disabled="domain.editable"
          v-model.number="domain.value"
          v-if="domain.type === 'datetime'"
        ></el-date-picker>
        <el-select
          :disabled="domain.editable"
          v-model.number="domain.value"
          v-if="domain.type === 'xialakuang'"
          placeholder
          filterable
          allow-create
          default-first-option
        >
          <el-option
            v-for="item in domain.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input
          type="textarea"
          :disabled="domain.editable"
          autocomplete="off"
          v-model.number="domain.value"
          v-if="domain.type === 'textarea'"
          size="mini"
          style="width: 600px"
          show-word-limit
          rows="5"
        >
        </el-input>
        <el-radio-group
          :disabled="domain.editable"
          v-model.number="domain.value"
          v-if="domain.type === 'danxuan'"
        >
          <el-radio label="否">否</el-radio>
          <el-radio label="是">是</el-radio>
        </el-radio-group>
        <el-checkbox-group
          :disabled="domain.editable"
          v-model.number="domain.value"
          v-if="domain.type === 'duoxuan'"
        >
          <el-checkbox
            v-for="item in domain.duoxuan_options"
            :label="item"
            :key="item"
            :value="item"
            >{{ item }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>

<el-button type="primary" @click="add()">确定添加</el-button>
    </el-form>
  </div>
</template>
<script>
import { add } from "@/api/test";
export default {
  data() {
    return {
      dynamicValidateForm: {
        domains: [
          {
            name: "username",
            label: "用户名",
            value: "",
            editable: 0,
            type: "text",
            options: [],
            duoxuan_options: [],
          },
          {
            name: "num1",
            label: "数量",
            value: "",
            editable: 0,
            type: "number",
            options: [],
            duoxuan_options: [],
          },
          {
            name: "addtime",
            label: "添加时间",
            value: this.moment(new Date())
              .utcOffset(480)
              .format("YYYY-MM-DD HH:mm:ss"),
            editable: 0,
            type: "datetime",
            options: [],
            duoxuan_options: [],
          },
          {
            name: "username2",
            label: "用户名2",
            value: "",
            editable: 0,
            type: "xialakuang",
            options: [
              { value: "用户1", label: "标签1" },
              { value: "用户2", label: "标签2" },
              { value: "用户3", label: "标签3" },
            ],
          },
          {
            name: "beizhu",
            label: "备注",
            value: "",
            editable: 0,
            type: "textarea",
            options: [],
            duoxuan_options: [],
          },
          {
            name: "whether_agree",
            label: "是否同意",
            value: "否",
            editable: 0,
            type: "danxuan",
            options: [],
            duoxuan_options: [],
          },
          {
            name: "chengshi",
            label: "城市",
            value: [],
            editable: 0,
            type: "duoxuan",
            options: [],
            duoxuan_options: ["北京", "上海", "深圳"],
          },
        ],
      },
      rules: [],
    };
  },
  methods: {
    add() {
      //先判断表单是否通过了判断
      this.$refs.dynamicValidateForm.validate((valid) => {
        //代表通过验证 ,将参数传回后台
        if (valid) {
          let params = Object.assign({}, this.dynamicValidateForm);
          var jsonstring = "";
          var obj = {};
          var duoxuan_string = ""; //多选字符串
          this.dynamicValidateForm.domains.forEach((element) => {
            if (element.type === "datetime") {
              if (element.value) {
                element.value = this.moment(element.value)
                  .utcOffset(480)
                  .format("YYYY-MM-DD HH:mm:ss");
              }
            } else if (element.type === "duoxuan") {
              duoxuan_string = element.value + ",";
              duoxuan_string = duoxuan_string.substring(
                0,
                duoxuan_string.length - 1
              );
              element.value = duoxuan_string;
            }
            this.$set(obj, element.name, element.value);
          });
          add(obj).then((res) => {
            this.$message({
              type: "info",
              message: res.Message,
            });
            if (res.Code == 702) {
              return;
            }
            this.$router.push("/patient/TEST/test_list");
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>