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