el-table中el-table-column嵌套el-form-item,进行数组表单的校验规则:
1:正常表单校验:在上方用rules:绑定rules进行表单校验
<el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="100px">
<el-row>
<el-col :span="24">
<el-form-item label="字段名" prop="name">
<el-input
v-model="form.location"
:maxlength="30"
placeholder="请输入字段名"
clearable
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
正常rules写法:
const rules = reactive<Rules>({
name: [{ required: true, message: '请输入', trigger: 'blur' }],
})
2:正常嵌套表格的校验:el-table绑定的是postList(获取到的表格数据源)
<el-form ref="fireRef" v-loading="loading" :model="tableFrom" :rules="rules">
<el-table id="lock-order-table" ref="tableRef" v-loading="loading" :data="postList">
<el-table-column label="字段名" align="center" prop="name" class="vertical-align">
<template #default="scope">
<el-input v-model="scope.row.name" placeholder="请填写" maxlength="11" />
</template>
</el-table-column>
</el-table>
</el-form>
3:表格嵌套校验如果是数组校验
- 首先postList不能直接用获取到的表格数据源,需要一个变量进行接收postList然后再绑定到el-table中的data中
- 绑定的规则校验在<script>标签中再定义rules进行字段校验需要改变
- prop绑定需要改变为:`创建的变量.${scope.$index}.字段名`
- 这边我原本的postList是接受的数据,现在改为
const tableFrom = reactive({ form: postList.value, })
-
所以我的el-table绑定的数据也要变成:data="tableFrom.form"
<el-table ref="tableRef" v-loading="loading" :data="tableFrom.form">
-
我的rules中也应该在嵌套一个form对象
const rules = reactive({ form: { name: [{ required: true, message: '请输入', trigger: 'blur' }], }, })
最终结果:
-
<el-table-column label="联系方式" align="center" prop="name" class="vertical-align"> <template #default="scope"> <el-form-item :prop="`form.${scope.$index}.name`" :rules="rules.form.name"> <el-input v-model="scope.row.name" placeholder="请填写" maxlength="11" /> </el-form-item> </template> </el-table-column>