form-create使用案例

最新推荐文章于 2025-03-10 14:21:12 发布

goudexingwu

最新推荐文章于 2025-03-10 14:21:12 发布

阅读量2.3k

点赞数 1

本文链接：https://blog.csdn.net/goudexingwu/article/details/105811362

版权

本文介绍了form-create组件的使用，通过代码示例展示了如何创建表单、处理表单数据及实现动态增删表单项等功能，帮助开发者高效构建前端表单应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<template>
    <div class="app-container">
        <h1>以下是form-create</h1>

        <form-create v-model="form" :rule="rule" @on-submit="onSubmit" :submitBtn="submitBtn" :option="option"></form-create>
    </div>
</template>

<script>
import formCreate, { maker } from "@form-create/element-ui";

export default {
    name: "app-container",
    data() {
        return {
            option: {},
            form: {},
            submitBtn: {
                type: "primary",
                //尺寸 medium / small / mini
                size: "medium",
                //是否朴素按钮
                plain: false,
                //是否圆角按钮
                round: false,
                //是否圆形按钮
                circle: false,
                //是否加载中状态
                loading: false,
                //是否禁用状态
                disabled: false,
                //图标类名
                icon: "el-icon-upload",
                //按钮宽度
                width: "100%"
            },
            rule: []
        };
    },
    components: {
        formCreate: formCreate.$form()
    },
    beforeCreate() {},
    created() {},
    computed: {},
    filters: {},
    methods: {
        onSubmit(formData) {
            //TODO 提交表单
            console.log(formData);
        }
    },
    mounted: function() {
        var self = this;
        this.$nextTick(function() {
            let data = {
                code: 1,
                message: "成功",
                data: [
                    {
                        id: "1",

最低0.47元/天解锁文章