更新记录

1.0.1（2023-01-15）

优化表单提交返回的表单数据

1.0.0（2023-01-15）

插件上传

平台兼容性

使用方法

<template>
    <view>
        <uni-section title="动态表单" type="line">
            <dynamic-form ref="dynamicForm" :dynamicFormData="formArr" @submitFrom="submitFrom"></dynamic-form>
        </uni-section>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                formArr:  {
                    formdatas:[
                    {
                        id: "name",
                        placeholder: "请输入姓名",
                        label: "姓名",
                        type: "text",
                        value:"",
                        rules: [{
                            required: true,
                            errorMessage: '姓名不能为空'
                        }],
                    },{
                        id: "bDateTime",
                        placeholder: "请选择日期时间",
                        label: "日期时间",
                        type: "datetime",
                        value:"",
                        rules: [{
                            required: true,
                            errorMessage: '日期时间不能为空'
                        }],
                    },{
                        id: "age",
                        placeholder: "请选择年龄段",
                        label: "年龄",
                        type: "radio",
                        value:"",
                        list: [
                            {
                                value: 1,
                                text: "15岁以下",
                            },
                            {
                                value: 2,
                                text: "16~20岁",
                            },
                            {
                                value: 3,
                                text: "21~25岁",
                            },
                            {
                                value: 4,
                                text: "26~30岁",
                            },
                            {
                                value: 5,
                                text: "31~40岁",
                            },
                            {
                                value: 6,
                                text: "40岁以上",
                            },
                        ],
                        rules: [{
                            required: true,
                            errorMessage: '请选择年龄段'
                        }],
                    },{
                        id: "hobby",
                        placeholder: "请选择兴趣爱好",
                        label: "兴趣爱好",
                        type: "checkbox",
                        value:[],
                        list: [{
                            text: '跑步',
                            value: 0
                        }, {
                            text: '游泳',
                            value: 1
                        }, {
                            text: '绘画',
                            value: 2
                        }, {
                            text: '足球',
                            value: 3
                        }, {
                            text: '篮球',
                            value: 4
                        }, {
                            text: '其他',
                            value: 5
                        }],
                        rules: [{
                            required: true,
                            errorMessage: '兴趣爱好不能为空'
                        },{
                                format: 'array'
                            },
                            {
                                validateFunction: function(rule, value, data, callback) {
                                    if (value.length < 2) {
                                        callback('请至少勾选两个兴趣爱好')
                                    }
                                    return true
                                }
                            }],
                        },
                        {
                            id: "introduction",
                            placeholder: "请输入自我介绍内容",
                            label: "自我介绍",
                            type: "textarea",
                            value:"",
                            rules: [{
                                required: true,
                                errorMessage: '自我介绍不能为空'
                            }],
                        },
                        {
                            id: "city",
                            placeholder: "请选择城市",
                            label: "选择城市",
                            type: "datapicker",
                            value:"",
                            list: [{
                                text: "北京",
                                value: "10001",
                            }, {
                                text: "上海",
                                value: "10002",
                            }, {
                                text: "深圳",
                                value: "10004",
                            }],
                            rules: [{
                                required: true,
                                errorMessage: '请选择城市'
                            }],
                        },
                        {
                            id: "skills",
                            placeholder: "请选择技能",
                            label: "选择技能",
                            type: "dataselect",
                            value:"",
                            list: [{
                                    value: 0,
                                    text: "编程"
                                },
                                {
                                    value: 1,
                                    text: "绘画"
                                },
                                {
                                    value: 2,
                                    text: "运动"
                                },
                            ],
                            rules: [{
                                required: true,
                                errorMessage: '请选择技能'
                            }],
                        },
                    ]
                }
            }
        },
        methods: {
            // 表单提交事件
            submitFrom(val){
                console.log('表单提交数据',val)
            }
        }
    }
</script>

<style  lang="scss">
    .example {
        padding: 15px;
        background-color: #fff;
    }
    .button-group {
        margin-top: 15px;
        display: flex;
        justify-content: space-around;
    }
</style>