vue2 SearchForm组件 表单查询

vue2SearchForm组件 表单查询

SearchForm.vue

<template>
    <div class="form-wrap">
        <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            :label-width="`${labelWidth}px`"
            class="form-wrap-con"
        >
            <el-row
                style="width: 100%;flex-wrap: wrap;"
                type="flex"
            >
                <el-col
                    v-for="(item,idx) in ruleFormconfig"
                    :key="idx + 'filterArr'"
                    justify="space-around"
                    :xs="24"
                    :sm="24"
                    :md="12"
                    :xl="xlSpanCol"
                    class="col-wrap"
                >
                    <el-form-item
                        v-if="item.type == 'input'"
                        :key="item.prop"
                        :ref="item.prop"
                        :label="item.label"
                        :prop="item.prop"
                    >
                        <el-input
                            v-model="ruleForm[item.prop]"
                            :type="item.inputType"
                            :placeholder="item.placeholder || '请输入'"
                        />
                    </el-form-item>
                    <el-form-item
                        v-else-if="item.type == 'select'"
                        :key="item.prop"
                        :label="item.label"
                        :prop="item.prop"
                    >
                        <el-select
                            :ref="item.prop"
                            v-model="ruleForm[item.prop]"
                            :placeholder="item.placeholder || '请选择'"
                            :multiple="item.multiple || false"
                            :collapse-tags="item.multiple || false"
                            :filterable="item.filterable"
                            :clearable="item.clearable"
                            :reserve-keyword="item.reserveKeyword"
                            :remote-method="item.remoteMethod"
                            :loading="item.loading"
                            class="collapse_class"
                        >
                            {{ item.loading }}
                            <el-option
                                v-for="selectItem in item.options"
                                :key="selectItem.value"
                                :label="selectItem.label"
                                :value="selectItem.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="item.type == 'date'"
                        :key="item.prop"
                        :ref="item.prop"
                        :label="item.label"
                        :prop="item.prop"
                    >
                        <el-date-picker
                            v-model="ruleForm[item.prop]"
                            :type="item.inputType || 'date'"
                            :placeholder="item.placeholder || '选择日期'"
                            :value-format="item.format || 'yyyy-MM-dd'"
                            :clearable="item.clearable"
                            :picker-options="item.pickerOptions"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        />
                    </el-form-item>
                    <slot
                        v-if="item.slotName"
                        :name="item.slotName"
                    />
                </el-col>
                <!-- 查询 slot -->
                <el-col
                    v-if="btnSlot"
                    class="col-wrap"
                    :xs="24"
                    :sm="24"
                    :md="12"
                    :xl="xlSpanCol"
                >
                    <slot
                        class="btnSlot"
                        name="btnSlotName"
                    />
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'SearchForm',
    components: {},
    props: {
        ruleFormconfig: {
            type: Array,
            default() {
                return {};
            }
        },
        ruleForm: {
            type: Object,
            default() {
                return {};
            }
        },
        rules: {
            type: Object,
            default() {
                return {};
            }
        },
        btnSlot: {
            type: Boolean,
            default: false
        },
        labelWidth: {
            type: Number,
            default: 100
        },
        xlSpanCol: {
            type: Number,
            default: 8
        }
    },
    data() {
        return {};
    },
    methods: {
        // 提交
        submitForm(formName) {
            this.$emit('submitForm', formName);
        },
        // 重置
        resetForm(formName) {
            this.$emit('resetForm', formName);
        }
    }
};
</script>
<style  lang="scss" scoped>
.form-wrap {

	::v-deeep .el-col {
		height: 32px!important;
	}

	.form-wrap-con {

		.col-wrap {
			margin-bottom: 16px;
			height: 32px;

			::v-deep .el-input {
				width: 272px;
			}

			::v-deep .el-range-editor.el-input__inner {
				width: 272px;
			}
		}
	}
}

</style>

使用

            <SearchForm
                ref="form"
                :rule-formconfig="ruleFormconfig"
                :rule-form="ruleForm"
                :btn-slot="true"
                :label-width="110"
            >
                <div slot="agentid">
                    <AgentIdSelectList
                        ref="AgentIdSelectRef"
                        v-model="ruleForm.agentid"
                    />
                </div>
                <el-button
                    slot="btnSlotName"
                    @click="reset"
                >
                    重置
                </el-button>
                <el-button
                    slot="btnSlotName"
                    type="primary"
                    color="#2469F1"
                    @click="search"
                >
                    查询
                </el-button>
            </SearchForm>

效果