在elementui,antDesign,antDesignVue中表格嵌套多个表单项校验

前言

在此记录下使用 elementui，antDesign，antDesignVue 的表格嵌套表单校验的一些经验。

要达到的目的是：有个多行表格，每一行有多个表单项（比如输入框），表单项填完值后，点击提交，校验表格中所有表单项，校验通过则将整个表格数据送到后台。还可以重新给表格赋值（比如进入详情页面）。效果如下：

正文

elementui 和 elementPlus 使用方式一样，这里就只用 elementui 来举例，版本是 2.x。

antDesignVue 1.x 版本有两种表单校验方式，v-decorator 和 FormModel ，要达到上面的效果需要用 FormModel 的方式，而后面 2.x 及以后的版本将两种方式合并，统一用 FormModel 的方式。

antDesign 我这里用的 3.x 版本，用的是 getFieldDecorator 方式，并且是函数式组件的写法。

需要注意的是如果使用的是 react@<15.3.0，则 getFieldDecorator 调用不能位于纯函数组件中。

elementui 用法

只需要将 prop 里面的属性和v-model表单数据引用保持一致即可，例如：

:prop="'rows.'+scope.$index+'.age'"
v-model.trim="asdfform.rows[scope.$index].age"

页面结构

<el-form :model="asdfform" ref="asdfform" label-width="20px">
 <el-table :data="asdfform.rows">
 <el-table-column prop="name" label="name"></el-table-column>
 <el-table-column prop="age" label="age">
 <template slot-scope="scope">
 <el-form-item label=" " :rules="[{required: true, message:'请输入'}]" :prop="'rows.'+scope.$index+'.age'">
 <el-input v-model.trim="asdfform.rows[scope.$index].age"></el-input>
 </el-form-item>
 </template>
 </el-table-column>
 <el-table-column prop="address" label="address">
 <template slot-scope="scope">
 <el-form-item label=" " :rules="[{required:true,message:'请输入'}]" :prop="'rows.'+ scope.$index + '.address'">
 <el-input v-model.trim="asdfform.rows[scope.$index].address"></el-input>
 </el-form-item>
 </template>
 </el-table-column>
 </el-table>
</el-form>
<el-button type="primary" size="small" @click="handleSubmit">表单提交</el-button>
<el-button type="danger" size="small" @click="resetTableData">重新给表格赋值</el-button>

数据和方法定义

data() {
 return {
 asdfform: {
 rows: [
 { key: 1, name: `Edrward ${1}`, age: "1234", address: "1234" },
 { key: 2, name: `Edrward ${2}`, age: "1234", address: "1234" },
 { key: 3, name: `Edrward ${3}`, age: "", address: "" },
 ],
 },
 };
 },
 methods: {
 handleSubmit() {
 this.$refs.asdfform.validate((valid) => {
 console.log('表格数据',JSON.parse(JSON.stringify(this.asdfform)));
 if (valid) {
 }
 });
 },
 resetTableData() {
 this.asdfform.rows = [
 { key: 1, name: `Edrward ${1}`, age: "1234", address: "1234" },
 { key: 2, name: `Edrward ${2}`, age: "1234", address: "1234" },
 { key: 3, name: `Edrward ${3}`, age: "", address: "" },
 { key: 4, name: `Edrward ${4}`, age: "4", address: "44" },
 ];
 },
 },

完整示例

antDesignVue 1.x 用法

如果用的是FormModel 方式，那么写法和 elementui 中一样，不过需要先引入

import { FormModel } from 'ant-design-vue'
Vue.use(FormModel)

页面中使用

<a-form-model :model="asdfform" ref="asdfform">
 <a-table
 :columns="asdfcolumns"
 :dataSource="asdfform.rows"
 bordered
 :rowKey="(record,index)=>index"
 >
 <template slot="age" slot-scope="text,record, index">
 <a-form-model-item
 label=" "
 :prop="'rows.'+index+'.age'"
 :rules=" [{required: true, message:'请输入'}]"
 >
 <a-input v-model="asdfform.rows[index].age" />
 </a-form-model-item>
 </template>
 <template slot="address" slot-scope="text,record,index">
 <a-form-model-item
 label=" "
 :prop="'rows.'+index+'.address'"
 :rules="[{required: true, message:'请输入' }]"
 >
 <a-input v-model="asdfform.rows[index].address" />
 </a-form-model-item>
 </template>
 </a-table>
 <a-form-item>
 <a-button type="primary" @click="handleSubmit">Submit</a-button>
 </a-form-item>
</a-form-model>

data: function () {
 return {
 asdfform: {
 rows: [
 { key: 1, name: `Edrward ${1}`, age: '1234', address: '1234' },
 { key: 2, name: `Edrward ${2}`, age: '1234', address: '1234' },
 { key: 3, name: `Edrward ${3}`, age: '', address: '' },
 ]
 },
 asdfcolumns: [
 { title: 'name', dataIndex: 'name', width: '25%' },
 { 
 title: 'age', 
 dataIndex: 'age',
 width: '15% ',
 scopedSlots: { customRender: 'age' }
 },
 { 
 title: 'address',
 dataIndex: 'address',
 width: '40%',
 scopedSlots: { customRender: 'address' }
 },
 { title: 'operation', dataIndex: 'operation' },
 ],
 }
},
methods: {
 handleSubmit() {
 this.$refs.asdfform.validate(valid => {
 console.log(this.asdfform)
 if (valid) { }
 });
 }
}

antDesign 3.x 用法

react 中没有 v-model 的用法，这里通过 setState + useEffect 来实现。

vue 中使用 asdfform 定义表单数据，asdfform.rows 定义表格数据，也就是表格数据是嵌套在表单数据里面的，所以表单项改变，表格数据也会同步改变。

react 中表格数据和表单数据的分开维护的，所以当表格数据改变时，需要在 useEffect 里面同步表单数据，同样表单数据变化后，提交函数中也会创建一份新的表格数据。

1、定义基本结构

这里使用了 Form.create 和 getFieldDecorator 的方式校验表单。

经 Form.create() 包装过的组件会自带 this.props.form 属性。

使用 Form.create 处理后的表单具有自动收集数据并校验的功能，但如果您不需要这个功能，或者默认的行为无法满足业务需求，可以选择不使用 Form.create 并自行处理数据。

const App = ({ form }) => {
 const { getFieldDecorator, setFieldsValue, validateFields } = form;
 
 // 定义表格数据
 const [data, setData] = useState([
 { key: 1, name: `Edrward ${1}`, age: "1234", address: "1234" },
 { key: 2, name: `Edrward ${2}`, age: "1234", address: "1234" },
 { key: 3, name: `Edrward ${3}`, age: "", address: "" },
 ]);
 return (
 <>
 <Form>
 <Table
 columns={asdfcolumns}
 dataSource={data}
 pagination={false}
 rowKey="key"
 ></Table>
 <Form.Item>
 <Button type="primary" onClick={handleSubmit}>
 Submit
 </Button>
 <Button onClick={handleReset}>reset</Button>
 </Form.Item>
 </Form>
 </>
 );
}
const WrappedMyFormComponent = Form.create()(App);
export default WrappedMyFormComponent;

2、添加表格列，根据需要自定义列内容

const asdfcolumns = [
 { title: "name", dataIndex: "name", width: "25%" },
 {
 title: "age",
 dataIndex: "age",
 width: "15%",
 render: (text, record, index) => (
 <Form.Item>
 {getFieldDecorator(`data.${index}.age`, {
 rules: [{ required: true, message: "请输入" }],
 initialValue: record["age"],
 })(<Input />)}
 </Form.Item>
 ),
 },
 {
 title: "address",
 dataIndex: "address",
 width: "40%",
 render: (text, record, index) => (
 <Form.Item>
 {getFieldDecorator(`data.${index}.address`, {
 rules: [
 {
 required: true,
 message: "请输入！",
 },
 ],
 initialValue: record["address"],
 })(<Input />)}
 </Form.Item>
 ),
 },
 { title: "operation", dataIndex: "operation" },
];

3、添加提交函数和重置数据函数（给表格重新赋值）

const handleSubmit = () => {
 validateFields((err, values) => {
 console.log("Received values of form: ", values);
 if (!err) {
 const updatedData = data.map((item, index) => ({
 ...item,
 age: values.data[index].age,
 address: values.data[index].address,
 }));
 console.log(updatedData); //更新后的数据
 }
 });
 };

const handleReset = () => {
 let newData = [
 { key: 1, name: `Edrward ${1}`, age: "1", address: "2" },
 { key: 2, name: `Edrward ${2}`, age: "3", address: "4" },
 { key: 3, name: `Edrward_${3}`, age: "", address: "" },
 { key: 4, name: `Edrward ${3}`, age: "5", address: "6" },
 setData(newData),
 ];
 };

4、表格数据改变后同步更新表单

useEffect(() => {
 //当 data 状态更新时,手动设置表单字段的值
 const fields = data.reduce((acc, record, index) => {
 acc[`data.${index}.age`] = record.age;
 acc[`data.${index}.address`] = record.address;
 return acc;
 }, {});
 setFieldsValue(fields);
 }, [data]);

antDesign 的完整代码

import { Button, Form, Input, Table } from "antd";
import { useEffect, useState } from "react";
const App = ({ form }) => {
 const { getFieldDecorator, setFieldsValue, validateFields } =
 form;
 const asdfcolumns = [
 { title: "name", dataIndex: "name", width: "25%" },
 {
 title: "age",
 dataIndex: "age",
 width: "15%",
 render: (text, record, index) => (
 <Form.Item>
 {getFieldDecorator(`data.${index}.age`, {
 rules: [{ required: true, message: "请输入" }],
 initialValue: record["age"],
 })(<Input />)}
 </Form.Item>
 ),
 },
 {
 title: "address",
 dataIndex: "address",
 width: "40%",
 render: (text, record, index) => (
 <Form.Item>
 {getFieldDecorator(`data.${index}.address`, {
 rules: [
 {
 required: true,
 message: "请输入！",
 },
 ],
 initialValue: record["address"],
 })(<Input />)}
 </Form.Item>
 ),
 },
 { title: "operation", dataIndex: "operation" },
 ];
 const [data, setData] = useState([
 { key: 1, name: `Edrward ${1}`, age: "1234", address: "1234" },
 { key: 2, name: `Edrward ${2}`, age: "1234", address: "1234" },
 { key: 3, name: `Edrward ${3}`, age: "", address: "" },
 ]);
 const handleSubmit = () => {
 validateFields((err, values) => {
 if (!err) {
 console.log("Received values of form: ", values);
 const updatedData = data.map((item, index) => ({
 ...item,
 age: values.data[index].age,
 address: values.data[index].address,
 }));
 console.log(updatedData);
 }
 });
 };
 const handleReset = () => {
 let newData = [
 { key: 1, name: `Edrward ${1}`, age: "1", address: "2" },
 { key: 2, name: `Edrward ${2}`, age: "3", address: "4" },
 { key: 3, name: `Edrward_${3}`, age: "", address: "" },
 { key: 4, name: `Edrward ${3}`, age: "5", address: "6" },
 setData(newData),
 ];
 };
 useEffect(() => {
 //当 data 状态更新时,手动设置表单字段的值
 const fields = data.reduce((acc, record, index) => {
 acc[`data.${index}.age`] = record.age;
 acc[`data.${index}.address`] = record.address;
 return acc;
 }, {});
 setFieldsValue(fields);
 }, [data]);
 return (
 <>
 <Form>
 <Table
 columns={asdfcolumns}
 dataSource={data}
 pagination={false}
 rowKey="key"
 ></Table>
 <Form.Item>
 <Button type="primary" onClick={handleSubmit}>
 Submit
 </Button>
 <Button onClick={handleReset}>reset</Button>
 </Form.Item>
 </Form>
 </>
 );
};
const WrappedMyFormComponent = Form.create()(App);
export default WrappedMyFormComponent;