基于elelemt-ui封装一个表单

子组件

searchForm

javascript 复制代码
<template>
    <el-form
        ref="form"
        :model="value"
        :rules="rules"
        :label-width="labelWidth"
        :inline="inline"
    >
        <el-form-item
            v-for="field in fields"
            :key="field.slot"
            :label="field.label"
            :prop="field.slot"
        >
            <slot :name="field.slot">
                <el-input
                    v-if="!$slots[field.slot]"
                    v-model="formValue[field.slot]"
                    @input="updateValue(field.slot, $event)"
                />
            </slot>
        </el-form-item>
        <el-button
            type="primary"
            @click="submitForm"
        >
            搜索
        </el-button>
        <el-button @click="resetForm">
            重置
        </el-button>
    </el-form>
</template>

<script>
import {
    defineComponent, ref, watch,
} from 'vue';

export default defineComponent({
    name: 'SearchForm',
    props: {
        value: {
            type: Object,
            default: () => ({}),
        },
        fields: {
            type: Array,
            default: () => [],
        },
        rules: {
            type: Object,
            default: () => ({}),
        },
        labelWidth: {
            type: String,
            default: '100px',
        },
        inline: {
            type: Boolean,
            default: true,
        },
    },
    setup(props, { emit }) {
        const form = ref(null);
        const formValue = ref({ ...props.value });

        watch(() => props.value, (newValue) => {
            formValue.value = { ...newValue };
        }, { deep: true });

        const submitForm = () => {
            form.value.validate((valid) => {
                if (valid) {
                    emit('submit', props.value);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        };

        const resetForm = () => {
            form.value.resetFields();
            emit('reset');
        };

        const updateValue = (key, value) => {
            emit('input', {
                ...formValue.value,
                [key]: value,
            });
        };

        return {
            form,
            formValue,
            submitForm,
            resetForm,
            updateValue,
        };
    },
});
</script>
<style scoped>
v-deep .el-button--primary{
    margin: 0;
}
</style>

父组件

javascript 复制代码
            html
            <p>父{{ searchFormModel }}</p>
            <search-form
                ref="searchFormRef"
                v-model="searchFormModel"
                :fields="searchFromFields"
                :rules="rules"
                @submit="onSearchFormSubmit"
                @reset="onSearchFormReset"
            >
                <template #ruleId>
                    <el-select
                        v-model="searchFormModel.ruleId"
                        placeholder="请选择活动区域"
                    >
                        <el-option
                            label="区域一"
                            value="shanghai"
                        />
                        <el-option
                            label="区域二"
                            value="beijing"
                        />
                    </el-select>
                </template>
                <template #type>
                    <el-checkbox-group v-model="searchFormModel.type">
                        <el-checkbox
                            label="美食/餐厅线上活动"
                            name="type"
                        />
                        <el-checkbox
                            label="地推活动"
                            name="type"
                        />
                        <el-checkbox
                            label="线下主题活动"
                            name="type"
                        />
                        <el-checkbox
                            label="单纯品牌曝光"
                            name="type"
                        />
                    </el-checkbox-group>
                </template>
            </search-form>


    // 引入
    import searchForm from './searchForm';
    // 注册
    components: {
        searchForm,
    },
    setup() {
        const initData = reactive({
            searchFormModel: {
                categoryIds: '666',
                ruleId: '',
                type: [],
            },
            searchFromFields: [
                { label: '活动名称', slot: 'categoryIds' },
                { label: '活动区域', slot: 'ruleId' },
                { label: '活动性质', slot: 'type' },
            ],
            rules: {
                categoryIds: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                ruleId: [
                    { required: true, message: '请选择活动区域', trigger: 'change' },
                ],
                type: [
                    {
                        type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change',
                    },
                ],
            },
            searchFormRef: null,
        });

        const onSearchFormSubmit = (form) => {
            console.log('表单提交了', form);
        };
        const onSearchFormReset = () => {
            console.log('表单重置了');
            // initData.searchFormRef.resetFields();
        };
    
相关推荐
alikami15 分钟前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
wakangda1 小时前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡1 小时前
lodash常用函数
前端·javascript
emoji1111111 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
迷糊的『迷』1 小时前
vue-axios+springboot实现文件流下载
vue.js·spring boot
User_undefined1 小时前
uniapp Native.js原生arr插件服务发送广播到uniapp页面中
android·javascript·uni-app
web135085886351 小时前
uniapp小程序使用webview 嵌套 vue 项目
vue.js·小程序·uni-app
麦兜*1 小时前
轮播图带详情插件、uniApp插件
前端·javascript·uni-app·vue
陈大爷(有低保)1 小时前
uniapp小案例---趣味打字坤
前端·javascript·vue.js