UniApp Vue3 动态表单

左侧手机部分为动态表单内容，右侧为提交后获取到表单的值。

页面代码：

<view style="margin:15px; padding: 10rpx;">
        <tn-form label-position="top" ref="formRef" :model="formData" :rules="formRules">
            <tn-form-item label="" prop="reportDate">
                <label>定位：</label>
            </tn-form-item>
            <tn-form-item label="" prop="inspection_date">
                <label>巡检周期： <tn-button :text="true" @click="Datetimeclick"><text class="tn-black_text">
                            {{ formData.inspection_date }}
                        </text>
                    </tn-button>
                    <TnDateTimePicker v-model="formData.inspection_date" v-model:open="openDateTimePicker"
                        mode="yearmonth" />
                </label>
            </tn-form-item>
            <view v-for="(item, index) in WhMxListData" :key="index">
                <label>{{index+1}}、{{item.content_name}}</label>
                <br /><label>巡检部件情况说明</label>
                <tn-form-item prop="formData.addForms[index].factsheet">
                    <TnInput v-model="formData.addForms[index].factsheet" clearable />
                </tn-form-item>
                <br /><label>处理情况</label>
                <tn-form-item prop="formData.addForms[index].handlsitu">
                    <TnInput v-model="formData.addForms[index].handlsitu" clearable />
                </tn-form-item>
                <br /><label>处理后结果说明</label>
                <tn-form-item prop="formData.addForms[index].processresult">
                    <TnInput v-model="formData.addForms[index].processresult" clearable />
                </tn-form-item>
            </view>
            <tn-form-item label="附件" prop="imageList">
                <tn-image-upload v-model="imageList" :action="upload.url" :header="upload.headers"
                    :custom-upload-callback="uploadCallbackHandle" @remove="uploadRemoveHandle"></tn-image-upload>
            </tn-form-item>
            <tn-form-item label="维护人" prop="inspector">
                <TnInput v-model="formData.inspector" clearable />
            </tn-form-item>
            <tn-form-item label="联系电话" prop="phone">
                <TnInput v-model="formData.phone" clearable />
            </tn-form-item>
        </tn-form>
        <view class="tn-mt tn-flex-center">
            <tn-button size="lg" bg-color="tn-gradient-bg__blue" text-color="#fff" @click="submitForm"> 保存
            </tn-button>

        </view>
    </view>

script代码：

const WhMxListData = ref([]);
const tableDataList = reactive({ list: [] });
// 表单初始化
    const formData = ref({
        inspection_date: '',
        inspector: '',
        phone: '',
        fileName: '',
        filePath: '',
        addForms: [
            {
                factsheet: '',
                handlsitu: '',
                processresult: '',
            }
        ],
    });
//循环后台内容
    const getList = () => {
        MonthOperationMXList(queryData).then(res => {
            WhMxListData.value = res.rows;
            tableDataList.list = res.rows;
            //循环动态表单
            tableDataList.list.forEach(item => {
                const addFormItem = {
                    factsheet: '',
                    handlsitu: '',
                    processresult: '',
                }
                formData.value.addForms.push(addFormItem);
            })
            console.log(formData.value);
        });
    }
    /* 提交表单 */
    const submitForm = () => {
        console.log(formData.value);
    };
    onl oad((e) => {
        getList();

    });

 地址：https://www.cnblogs.com/blue123/p/17984090