element teble嵌套表单

以下代码是组件代码 并不是上图的代码 ，只是大致功能是一样的，emm 主要是table列表里面嵌套form表单 并有添加校验， 其余功能代码是组件传参 或其他逻辑使用的未用到可不用

<template>
    <div>
        <el-form :rules="rules" ref="tableForm" :model='tableDataForm'>
            <el-table class="area-info" border :data="tableDataForm.tableData" style="width: 100%">
                <el-table-column fixed prop="targetType" label="指标类型" width="130" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.targetType'" :rules="rules.targetType">
                            <el-select v-model="scope.row.targetType" placeholder="请选择">
                                <el-option v-for="(v,i) in index_typeList" :key="i" :label="v.label" :value="v.value" />
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column fixed prop="targetName" label="指标名称" width="200" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.targetName'" :rules="rules.targetName">
                            <el-input v-model="scope.row.targetName"  show-word-limit maxlength="50"/>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column fixed prop="targetCode" label="指标编码" width="120">
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.targetCode'" :rules="rules.targetCode">
                            <el-input v-model="scope.row.targetCode" />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="unit" label="计量单位" width="120" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item>
                            <el-select v-model="scope.row.unit" placeholder="请选择">
                                <el-option v-for="(v,i) in measuring_unit" :key="i" :label="v.label" :value="v.value" />
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="thresholdUp" label="一级阈值上限" width="120" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.thresholdUp'" :rules="rules.thresholdUp">
                            <el-input v-model="scope.row.thresholdUp" />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="thresholdUp2" label="二级阈值上限" width="120" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.thresholdUp2'" :rules="rules.thresholdUp2">
                            <el-input v-model="scope.row.thresholdUp2" />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="thresholdDown" label="一级阈值下限" width="120" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.thresholdDown'" :rules="rules.thresholdDown">
                            <el-input v-model="scope.row.thresholdDown" />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="thresholdDown2" label="二级阈值下限" width="120" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.thresholdDown2'" :rules="rules.thresholdDown2">
                            <el-input v-model="scope.row.thresholdDown2" />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="rangeUp" label="量程上限" width="120" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.rangeUp'" :rules="rules.rangeUp">
                            <el-input v-model="scope.row.rangeUp" />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="rangeDown" label="量程下限" width="120" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.rangeDown'" :rules="rules.rangeDown">
                            <el-input v-model="scope.row.rangeDown" />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="parameterDesc" label="指标描述" width="160" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item>
                            <el-input v-model="scope.row.parameterDesc"  show-word-limit maxlength="100"/>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" prop="useArea" label="操作" width="70">
                    <template #default="scope">
                        <div>
                            <a @click="handleDel(scope.row,scope.$index)" class="operation delete">删除</a>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
    </div>
</template>

<script setup>
    import { onBeforeMount, reactive, ref, getCurrentInstance, watch, nextTick, onMounted } from "vue";
    import { useRouter } from 'vue-router';
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const validation = proxy.validation;
    const props = defineProps({
        listData: [],
    });
    const tableDataForm = reactive({
        tableData: [],
    })
    const measuring_unit = ref([])
    const index_typeList=ref([])
    const rules = {
        targetType: [{ required: true, message: '请选择', trigger: ['blur', 'change'], }, ],
        targetName: [{ required: true, message: '请输入', trigger: ['blur', 'change'], },
            { validator: validation, check: ['empty', 'blank'] }
        ],
        targetCode: [{ required: true, message: '请输入', trigger: ['blur', 'change'], },
            { validator: validation, check: ['empty', 'blank'] }
        ],
        thresholdUp:[{ validator: validation, check: [ 'number-decimals'] }],
        thresholdUp2:[{ validator: validation, check: [ 'number-decimals'] }],
        thresholdDown:[{ validator: validation, check: [ 'number-decimals'] }],
        thresholdDown2:[{ validator: validation, check: [ 'number-decimals'] }],
        rangeUp:[{ validator: validation, check: [ 'number-decimals'] }],
        rangeDown:[{ validator: validation, check: [ 'number-decimals'] }],

    }

    watch(()=>props.listData,(n,o)=> {
        if(n && n.length && n.length!=0){
           tableDataForm.tableData=JSON.parse(JSON.stringify(n)) 
       
        }
    } ,{ immediate: true })
    const handleDel = (item, index) => {
        tableDataForm.tableData.splice(index, 1)
    }
    onMounted(()=>{
        getdictionariesList();
    })
    defineExpose({
        addList,
        saveForm
    });
    
    async function getdictionariesList() {
        await proxy.api.apiSelectDictMap({ key: 'index_type,measuring_unit' }).then((res) => {
            if (res.success) {
                index_typeList.value = res.data.index_type;
                measuring_unit.value=res.data.measuring_unit;
            }
        })
    }
    function addList() {
        tableDataForm.tableData.push({})
    }

    function saveForm() {
        proxy.$refs.tableForm.validate((valid, fields) => {
            if (valid) {
                // 业务逻辑操作代码...
                proxy.$emit('completed', tableDataForm.tableData, )
            }
        })
    }
</script>
<style  lang="less"  scoped>
:deep(.el-form-item__label){
    padding: 0 !important; 
}
:deep(.el-form-item){
    display: inline-flex !important;
}
</style>