vuequanxain/src/components/myform/MyForm.vue

<template>
  <div>
    <el-form
      ref="formData"
      :label-position="labelPosition"
      class="form-box"
      :rules="rules"
      :inline="inline"
      :label-width="labelWidth"
      :model="formValue"
    >
      <template v-for="item in formList">
        <el-form-item :label="item.label" :prop="item.prop">
          <el-input
            v-if="item.type === 'input'"
            v-model.trim="formValue[item.prop]"
            :style="{ width: `${item.width}` }"
            :placeholder="item.placeholder"
            :type="item.style"
            :show-password="item.style == 'password' ? true : false"
            clearable
          ></el-input>
          <el-select
            v-if="item.type === 'select'"
            v-model="formValue[item.prop]"
            :placeholder="item.placeholder"
          >
            <el-option
              v-for="(item1, index1) in item.child"
              :key="index1"
              :label="item1.label"
              :value="item1.value"
            ></el-option>
          </el-select>
          <!-- 单选 -->
          <el-radio-group
            v-if="item.type === 'Radio'"
            v-model="formValue[item.prop]"
          >
            <el-radio
              v-for="ra in item.radios"
              :label="ra.value"
              :key="ra.value"
              >{{ ra.label }}</el-radio
            >
          </el-radio-group>

          <!-- 单选按钮 -->
          <el-radio-group
            v-if="item.type === 'RadioButton'"
            v-model="formValue[item.prop]"
            @change="item.change && item.change(formValue[item.prop])"
          >
            <el-radio-button
              v-for="ra in item.radios"
              :label="ra.value"
              :key="ra.value"
              >{{ ra.label }}</el-radio-button
            >
          </el-radio-group>

          <!-- 复选框 -->
          <el-checkbox-group
            v-if="item.type === 'Checkbox'"
            v-model="formValue[item.prop]"
          >
            <el-checkbox
              v-for="ch in item.checkboxs"
              :label="ch.value"
              :key="ch.value"
              >{{ ch.label }}</el-checkbox
            >
          </el-checkbox-group>

          <span v-if="item.type === 'text'">{{ item.value }}</span>
          <quill-editor
            v-if="item.type === 'richText'"
            id="quill-editor"
            v-model="formValue[item.prop]"
          >
          </quill-editor>
        </el-form-item>
      </template>
      <slot name="handle" :formData="formValue">
        <!-- <el-button type="primary" @click="submitForm">提交</el-button> -->
      </slot>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "my-form",
  props: {
    formList: {
      type: Array,
      default: function () {
        return [];
      },
    },

    formValue: {
      type: Object,
      default: function () {
        return {};
      },
    },
    rules: {
      type: Object,
      default: function () {
        return {};
      },
    },

    inline: {
      type: Boolean,
      default: function () {
        return false;
      },
    },

    labelPosition: {
      type: String,
      default: "right",
    },

    labelWidth: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          // this.$emit("submitForm", this.formValue);
        } else {
          return false;
        }
      });
    },
  },

  mounted() {
    //console.log(this.formList, "sss");
  },
};
</script>

<style lang="scss" scoped>
// .form-box {
//   margin-top: 30px;
// }

.form-box ::v-deep .ql-container {
  height: auto;
 
}

</style>