重点 圈起来考 :prop="
items[${scope.$index}].name" :rules="rules.name"
<template>
<el-form ref="tableForm" :model="formData" label-width="120px">
<el-table :data="formData.items" style="width: 100%;">
<el-table-column prop="name" label="名称" width="180">
<template #default="scope">
<el-form-item :prop="`items[${scope.$index}].name`" :rules="rules.name">
<el-input v-model="scope.row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
<!-- 其他列 -->
</el-table>
<el-button type="primary" @click="validateForm">提交</el-button>
</el-form>
</template>
<script setup>
import { reactive, ref } from 'vue';
const tableForm = ref(null);
const formData = reactive({
items: [
{ name: '' },
// 其他数据项
]
});
const rules = {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
]
};
const validateForm = () => {
tableForm.value.validate((valid) => {
if (valid) {
console.log('验证成功，提交数据:', formData);
} else {
console.log('验证失败');
return false;
}
});
};
</script>
