element表单提交组件的封装

最新推荐文章于 2024-05-14 17:00:04 发布

每天发布一篇原创

最新推荐文章于 2024-05-14 17:00:04 发布

阅读量371

点赞数

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/qq_26728817/article/details/112025396

版权

效果图：
在这里插入图片描述
基本满足表单提交的需求，如果还有可自行添加
代码：复制就能运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://www.jq22.com/jquery/vue2.6.10.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item :label="item.label" v-for="(item, index) in formLabel" :key="index">
            <!--输入框-->
            <el-input v-model="form[item.key]" v-if="item.type=== 'input'"></el-input>
<!--            单选框-->
            <el-radio-group v-model="form[item.key]" v-if="item.type==='radio'">
                <el-radio v-for="(subitem, index) of item.options"  :label="subitem.label" :value="subitem.value"></el-radio>
            </el-radio-group>
            <!--多选-->
            <el-checkbox-group v-model="form[item.key]" v-if="item.type=== 'checkbox'">
                <el-checkbox v-for="(subitem, index) of item.options"  :label="subitem.label" ></el-checkbox>
            </el-checkbox-group>
<!--            选择器-->
            <el-select v-model="form[item.key]" placeholder="请选择活动区域" v-if="item.type=== 'select'">
                <el-option v-for="(subitem, index) of item.options" :key="index" :label="subitem.label" :value="subitem.value"></el-option>
            </el-select>
<!--            日期选择器-->
            <el-date-picker v-if="item.type ==='date-picker'" type="date" placeholder="选择日期" v-model="form[item.key]" style="width: 100%;"></el-date-picker>
            <!--文本域-->
            <el-input v-model="form[item.key]" v-if="item.type=== 'textarea'"  type="textarea"   placeholder="请输入内容"></el-input>
<!--            上传图片-->
            <el-upload v-if="item.type=== 'upload'"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" v-if="item.type=== 'upload'">
                <img width="100%" :src="form[item.key]" alt="">
            </el-dialog>
        </el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form>
</div>
</body>
<script>
    let vm=new Vue({
        el: '#app',
        data: function() {
            return {
                //表单提交
                imageUrl:'',
                form: {
                    name: '',
                    sex: '',
                    imageUrl:'',
                    aihao:[],
                    region:'',
                    date:'',
                    jieshao:'',
                },
                //后台模拟数据
                formLabel: [
                    {
                        label: '姓名',
                        key: 'name',
                        type: 'input'
                    },
                    {
                        label: '性别',
                        key: 'sex',
                        type: 'radio',
                        options: [
                            {
                                label: "女",
                                value: '0'

                            },
                            {
                                label: "男",
                                value: '1'

                            }

                        ]
                    },
                    {
                        label: '照片',
                        key: 'imageUrl',
                        type: 'upload'
                    },
                    {
                        label: '爱好',
                        key: 'aihao',
                        type: 'checkbox',
                        options: [
                            {
                                label: "足球",
                                value: '0'

                            },
                            {
                                label: "跑步",
                                value: '1'

                            }

                        ]
                    },
                    {
                        label: '学历',
                        key: 'region',
                        type: 'select',
                        options: [
                            {
                                label: "本科",
                                value: '本科'

                            },
                            {
                                label: "硕士",
                                value: '硕士'

                            }

                        ]

                    },
                    {
                        label: '毕业时间',
                        key: 'date',
                        type: 'date-picker'
                    },
                    {
                        label: '自我介绍',
                        key: 'jieshao',
                        type: 'textarea'
                    },

                ],
                //上传图片
                dialogVisible: false
            }
        },
        methods:{
            // 提交
            onSubmit() {
                console.log(this.form);
            },
            //移除
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            //查看
            handlePictureCardPreview(file) {
                this.form.imageUrl = file.url;
                this.dialogVisible = true;
            }

        }
    })
</script>
</html>

每天发布一篇原创

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
element表单提交组件的封装

效果图：基本满足表单提交的需求，如果还有可自行添加代码：复制就能运行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <link rel="stylesheet" href="https://unpkg.com/element-ui/l
复制链接

扫一扫