使用vue生成动态表单,uniapp语法,vue+element也同理

效果如下

完整代码

<template>
    <view class="honourInfo">
        <view class="content-box">
            <u-form class="lh-40" ref="uForm" :model="form" :rules="rules">
                <view v-for="(item,index) of dataList" :key="item.id">
                    <u-form-item :label="item.name" :prop="'value' +item.id" labelWidth="80" borderBottom
                        :required='item.isRequired == 1'>
                        <u--input v-if="item.type == 1" maxlength='20' v-model="form['value' + item.id]"
                            :placeholder="'请填写' + item.name" border="none" clearable />
                        <u--textarea v-else-if="item.type == 2" maxlength='500' v-model="form['value' + item.id]"
                            :placeholder="'请填写' + item.name" count clearable />
                    </u-form-item>
                </view>
            </u-form>
        </view>
        <view class="submit">
            <view class="submit-btn" @click="submit">发送</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                form: {},
                dataList: [{
                        "id": 1,
                        "name": "活动感想",
                        "value": '',
                        "type": 1, //文本 最大长度20字以内 2超文本 最大长度500字以内
                        "isRequired": 1, //是否为必填
                    },
                    {
                        "id": 2,
                        "name": "活动目标",
                        "value": '',
                        "type": 1, //文本 最大长度20字以内 2超文本 最大长度500字以内
                        "isRequired": 1, //是否为必填
                    },
                    {
                        "id": 3,
                        "name": "活动说明",
                        "value": '',
                        "type": 2, //文本 最大长度20字以内 2超文本 最大长度500字以内
                        "isRequired": 0, //是否为必填
                    },
                ],
                rules: {},
                rankName: '',
                isLock: false, //防止多次提交
            };
        },
        computed: {
            userInfo() {
                return this.$store.state.user.USER_INFO
            }
        },
        onLoad() {
            this.getFrom()
        },
        methods: {
            getFrom() {
                let rules = {}
                let from = {}
                this.dataList.forEach(item => {
                    from['value' + item.id] = ''
                    rules['value' + item.id] = {
                        required: item.isRequired == 1 ? true : false,
                        message: `请选择${item.name}`,
                        trigger: ['blur']
                    };
                })
                console.log(from, rules)
                this.form = from
                this.rules = rules
            },
            submit() {
                console.log(this.form)
                let arr = this.dataList.map(item => {
                    item.value = this.form['value' + item.id]
                    return item
                })
                console.log(arr)
                this.$refs.uForm.validate().then(res => {})
            },
        },
    }
</script>

<style lang="scss" scoped>
    page {
        background: #F9F9F9;
        height: calc(100% - 116rpx);
    }

    .lh-40 {
        line-height: 40rpx;

        ::v-deep .u-form-item__body__left__content__label {
            color: #999999;
        }
    }

    .honourInfo {
        .content-box {
            margin-top: 16rpx;
            padding: 24rpx 32rpx 0 32rpx;
            font-size: 32rpx;
            font-weight: 400;
            line-height: 80rpx;
            background: #FFFFFF;

            .upload {
                margin: 10rpx 0;
                display: flex;

                .left {
                    width: 160rpx;
                    font-family: Source Han Sans CN;
                    color: #999999;
                }
            }
        }

        .submit {
            position: fixed;
            bottom: 0;
            z-index: 9999;
            margin-top: 20rpx;
            height: 98rpx;
            width: 100%;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(139, 139, 139, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;

            &-btn {
                // margin: 14rpx auto;
                width: 690rpx;
                height: 70rpx;
                line-height: 70rpx;
                text-align: center;
                font-size: 30rpx;
                color: #fff;
                background: #FFA758;
                border-radius: 10rpx;
            }
        }
    }
</style>

猜你喜欢

转载自blog.csdn.net/weixin_46324536/article/details/129625153