vue+elementui实现动态生成form 配置相关json即可生成form

组件目录

form.vue

<template>
    <el-form
        @submit.native.prevent
        class="dynamic-form"
        :ref="formConfig.ref"
        :inline="formConfig.inline"
        :model="value"
        :label-position="formConfig.labelPosition"
        :label-width="formConfig.labelWidth"
        :size="formConfig.size"
        :status-icon="formConfig.statusIcon"
    >
        <div
            class="formWrap"
            v-for="parentItem in formConfig.tabs"
            :key="parentItem.name"
            :label="parentItem.label"
            :name="parentItem.name"
            v-show="showOne==parentItem.name"
        >
            <dynamic-form-item
                v-for="item in parentItem.formItemList"
                :key="item.key"
                :item="item"
                :value="value[item.key]"
                v-if="value[item.key]!==undefined&&item.show!=false"
                @input="handleInput($event, item.key)"
                :style="{'min-width':columnMinWidth}"
            ></dynamic-form-item>
        </div>
        <slot/>
    </el-form>
</template>

<script>
export default {
    data() {
        // 密码验证
        return {
            activeName: "1"
        };
    },
    props: {
        formConfig: {
            type: Object,
            required: true
        },
        value: {
            type: Object,
            required: true
        },
        showOne: {
            type: String
        },
        columnMinWidth: {
            type: String
        }
    },
    created() {},
    mounted() {
        // this.setDefaultValue();
    },
    methods: {
        handleInput(val, key) {
            // 这里element-ui没有上报event，直接就是value了
            if(typeof(val) == 'string'){
                val = val.replace(/\s+/g, "");//去除空格
            }
            this.$emit("input", { ...this.value, [key]: val });
        },
        setDefaultValue() {
            const formData = { ...this.value };
            var that = this;
            // 设置默认值
            that.formConfig.tabs.forEach(item => {
                let formItemList = item.formItemList;
                formItemList.forEach(item1 => {
                    const { key, value } = item1;
                    if (formData[key] === undefined || formData[key] === null) {
                        formData[key] = value;
                    }
                });
            });
            that.$emit("input", { ...formData });
        }
    }
};
</script>

<style lang="scss">
.formWrap {
    overflow: hidden;
}
</style>

item.vue

<style>
.block {
    display: block !important;
    display: flex !important;
}
.inputo,
.selecto {
    width: 200px!important;
}
.form-itemo {
    width: 48%;
    float: left;
}
</style>

<template>
    <el-form-item
        class="form-itemo"
        :rules="Rules"
        :label="item.label"
        :prop="item.key"
        v-if="!item.isHide"
        :class="{'block':item.block}"
    >

        <el-input
            v-if="item.type==='input'"
            v-bind="$attrs"
            v-on="$listeners"
            :type="item.subtype"
            :min="item.min"
            :max="item.max"
            :minlength="item.minlength"
            :maxlength="item.maxlength"
            autocomplete="off"
            :placeholder="item.placeholder"
            :disabled="item.disabled"
            :readonly="item.readonly"
            :autosize="item.autosize"
            :clearable="item.clearable"
            class="inputo"
        >
            <template v-if="item.append" slot="append">{
  {item.append}}</template>
        </el-input>

        <el-select
            v-else-if="item.type==='select'"
            v-bind="$attrs"
            v-on="$listeners"
            :multiple="item.multiple"
            :collapse-tags="item.collapseTags"
            :disabled="item.disabled"
            :props="item.props"
            :clearable="item.clearable"
            :multiple-limit="item.multipleLimit"