思路:element-ui组件中是自带from校验的,所以想校验表格可以在其外部封装一个from
javascript
<template>
<el-form ref="formRef" :model="formData" :rules="formRules" :inline-message="true">
<el-table
:data="formData.mouldData"
border
stripe
highlight-current-row
:row-class-name="tableRowClassName"
:cell-style="{ 'text-align': 'center' }"
@row-click="handleRowClick"
:header-cell-style="{
background: '#b7babd',
color: '#1e1f22',
height: '35px',
'text-align': 'center'
}"
style="width: 100%;max-height:45vh;overflow-y: auto"
max-height="600"
>
<el-table-column label="序号" label-width="100px" type="index" />
<el-table-column label="用户名称">
<template #header> 用户名称</template>
<template #default="scope">
<el-form-item
size="small"
:prop="'mouldData.[' + scope.$index + '].evaluationProject'"
:rules="formRules.evaluationProject"
style="margin-top: 15px"
v-show="scope.row.show"
>
<el-input v-model="scope.row.evaluationProject" size="large" @input="handleInput(scope.row)"/>
</el-form-item>
<span v-show="!scope.row.show">{{ scope.row.evaluationProject }}</span>
</template>
</el-table-column>
</el-table>
</el-form>
</template>