element teble嵌套表单

大家好，欢迎来到IT知识分享网。

以下代码是组件代码 并不是上图的代码 ，只是大致功能是一样的，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>