封装form表单组件

<template>
    <el-dialog :title="dialogTitle" :visible.sync="visible" :width="width" custom-class="pagedialog" :before-close="cancel">
        <el-form ref="form" :rules="rules" :model="formData" class="demo-ruleForm" :label-width="labelWidth" :label-position="positionLabel">
            <el-row :gutter="gutter">
                <template v-for="item in dataOptions">
                    <el-col :span="spanCol" :key="item.id">
                        <el-form-item v-if="item.show" :key="item.id" :label-width="item.labelWidth" :prop="item.prop" :label="item.label">
                            <!-- input -->
                            <el-input v-if="item.type == 'input'" v-model="formData[item.prop]" :placeholder="item.placeholder" :disabled="item.disabled" :style="{ width: item.width }" :size="size"></el-input>
                            <!-- select -->
                            <el-select v-if="item.type == 'select'" v-model="formData[item.prop]" :placeholder="item.placeholder" :size="size" :style="{ width: item.width }">
                                <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </template>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    props: {
        //   开启关闭/弹框
        visible: {
            type: Boolean,
            default: false,
        },
        // 弹框宽度
        width: {
            type: String,
            default: "30%",
        },
        // 弹出标题
        dialogTitle: {
            type: String,
            default: "提示",
        },
        // 表单宽度
        labelWidth: {
            type: String,
            default: "80px",
        },
        // 表单数据
        formData: {
            type: Object,
            default: () => { },
        },
        // 表单校验
        rules: {
            type: Object,
            default: () => { },
        },
        // 表单类型
        dataOptions: {
            type: Array,
            default: () => [],
        },
        // 控制该表单域下组件的尺寸 medium / small / mini
        size: {
            type: String,
            default: "medium",
        },
        // 栅格间隔
        gutter: {
            type: Number,
            default: 10,
        },
        // 栅格占据的列数
        spanCol: {
            type: Number,
            default: 24,
        },
        // 表单域标签的位置 可选值 right/left/top
        positionLabel: {
            type: String,
            default: "right",
        },
    },
    data() {
        return {
            dialogVisible: false,
        };
    },
    methods: {
        // 取消
        cancel() {
            this.reset();
            this.$emit("cancel");
        },
        // 保存
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let data = JSON.parse(JSON.stringify(this.formData));
                    console.log(data);
                    this.$emit("submit", data);
                }
            });
        },
        // 重置表单
        reset() {
            this.$refs.form.resetFields();
        },
    },
};
</script>

<style lang="scss" scoped>
// /deep/.pagedialog {
//   margin-top: 120px !important;
//   width: 1000px;
//   height: 80%;
//   overflow-y: auto;
//   position: absolute;
//   left: 50%;
//   top: 50%;
//   padding-left: 20px;
//   transform: translate(-50%, -50%);
//   margin-top: 0 !important;
// }
</style>

使用方法

<!-- 使用方法 -->
<!-- <myDialog 
ref="myDialogRef" 
@cancel='cancel' 
@submit='submit 
:visible='visibleDialog' 
:formData='formData
 :rules='rules 
 :width='"50%" 
 :dialogTitle='弹框提示'
  :tableData="dataList" 
  :dataOptions='dataOptions'
:gutter='20'
:spanCol='12'
  >
   </myDialog >

  formData:{name:null,age:null}
     rules: {
                name: [
                    { required: true, message: '名称不能为空', trigger: 'blur' },
                    { validator: hanleEmpty, trigger: "blur" },
                    { max: 200, message: "最多输入200个字符", trigger: "blur" },
                ],
                age: [
                    { required: true, message: '请选择所属项目', trigger: 'change' }
                ]
            },
<!-- dataOptions: [
        {
            id: 1,
            type:'input',
            label: '姓名',
            prop:name,
            labelWidth:'',
            width: '100%',
            placeholder:'',
            disabled:fales,
            show:true,
        },
         {
            id: 2,
            type:'select',
            label: '姓名',
            prop:name,
            labelWidth:'',
            width: '100%',
            placeholder:'',
            disabled:fales,
            show:true,
            options:[{label:'17',value:'1'},{label:'17',value:'1'}]
        },
    ], -->