说明:
1.对于表格的数据结构相当于在tableData外层嵌套了一个表单。
2.在最完成包裹一个form,然后在用el-form-column将每个el-form-column再进行包裹。
3.利用rules进行自动校验。
//html部分
<el-form :model="form" label-position="left" label-width="100" ref= "form">
<el-form-item label="其他表单项" prop="name" :rules="rules.name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-table :data="form.tableData" border stripe>
<el-table-column label="该列单元格校验">
<template slot-scope="{ row, $index }">
<el-form-item
:prop="`tableData.${$index}.input`"
:rules="rules.input"
>
<el-input v-model="row.input"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
// data部分
form: {
name: "",
tableData: [
{
input: "" },
{
input: "" },
{
input: "" },
{
input: "" },
{
input: "" }
]
},
rules: {
name: [
{
required: true, trigger: ["blur", "change"], message: "请选择" }
],
input: [
{
required: true, trigger: ["blur", "change"], message: "请选择" }
]
},