在elementui,antDesign,antDesignVue中表格嵌套多个表单项校验
<h3 id="前言">前言</h3><p>在此记录下使用 <code>elementui</code>，<code>antDesign</code>，<code>antDesignVue</code> 的表格嵌套表单校验的一些经验。</p>
<p>要达到的目的是：有个多行表格，每一行有多个表单项（比如输入框），表单项填完值后，点击提交，校验表格中所有表单项，校验通过则将整个表格数据送到后台。还可以重新给表格赋值（比如进入详情页面）。效果如下：</p>
<p><img src="https://img2024.cnblogs.com/blog/895887/202506/895887-20250622235028385-1040437839.gif" alt="image" loading="lazy"></p>
<h3 id="正文">正文</h3>
<p><code>elementui</code> 和 <code>elementPlus</code> 使用方式一样，这里就只用 <code>elementui</code> 来举例，版本是 <code>2.x</code>。</p>
<p><code>antDesignVue 1.x</code> 版本有两种表单校验方式，<code>v-decorator</code> 和 <code>FormModel</code> ，要达到上面的效果需要用 <code>FormModel</code> 的方式，而后面 <code>2.x</code> 及以后的版本将两种方式合并，统一用 <code>FormModel</code> 的方式。</p>
<p><code>antDesign</code> 我这里用的 <code>3.x</code> 版本，用的是 <code>getFieldDecorator</code> 方式，并且是函数式组件的写法。</p>
<blockquote>
<p>需要注意的是如果使用的是 <code>react@<15.3.0</code>，则 <code>getFieldDecorator</code> 调用不能位于纯函数组件中。</p>
</blockquote>
<h4 id="elementui-用法">elementui 用法</h4>
<p>只需要将 <code>prop</code> 里面的属性和<code>v-model</code>表单数据引用保持一致即可，例如：</p>
<pre><code class="language-js">:prop="'rows.'+scope.$index+'.age'"
v-model.trim="asdfform.rows.age"
</code></pre>
<p>页面结构</p>
<pre><code class="language-html"><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.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.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>
</code></pre>
<p>数据和方法定义</p>
<pre><code class="language-js">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" },
];
},
},
</code></pre>
<p>完整示例</p>
<h4 id="antdesignvue-1x-用法">antDesignVue 1.x 用法</h4>
<p>如果用的是<code>FormModel</code> 方式，那么写法和 elementui 中一样，不过需要先引入</p>
<pre><code class="language-js">import { FormModel } from 'ant-design-vue'
Vue.use(FormModel)
</code></pre>
<p>页面中使用</p>
<pre><code class="language-html"><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.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.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>
</code></pre>
<pre><code class="language-js">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) { }
});
}
}
</code></pre>
<h4 id="antdesign-3x-用法">antDesign 3.x 用法</h4>
<p><code>react</code> 中没有 <code>v-model</code> 的用法，这里通过 <code>setState + useEffect</code> 来实现。</p>
<p><code>vue</code> 中使用 <code>asdfform</code> 定义表单数据，<code>asdfform.rows</code> 定义表格数据，也就是表格数据是嵌套在表单数据里面的，所以表单项改变，表格数据也会同步改变。</p>
<p><code>react</code> 中表格数据和表单数据的分开维护的，所以当表格数据改变时，需要在 <code>useEffect</code> 里面同步表单数据，同样表单数据变化后，提交函数中也会创建一份新的表格数据。</p>
<p>1、定义基本结构</p>
<p>这里使用了 <code>Form.create</code> 和 <code>getFieldDecorator</code> 的方式校验表单。</p>
<p>经 <code>Form.create()</code> 包装过的组件会自带 <code>this.props.form</code> 属性。</p>
<blockquote>
<p>使用 <code>Form.create</code> 处理后的表单具有自动收集数据并校验的功能，但如果您不需要这个功能，或者默认的行为无法满足业务需求，可以选择不使用 <code>Form.create</code> 并自行处理数据。</p>
</blockquote>
<pre><code class="language-js">const App = ({ form }) => {
const { getFieldDecorator, setFieldsValue, validateFields } = form;
// 定义表格数据
const = 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;
</code></pre>
<p>2、添加表格列，根据需要自定义列内容</p>
<pre><code class="language-js">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" },
];
</code></pre>
<p>3、添加提交函数和重置数据函数（给表格重新赋值）</p>
<pre><code class="language-js">const handleSubmit = () => {
validateFields((err, values) => {
console.log("Received values of form: ", values);
if (!err) {
const updatedData = data.map((item, index) => ({
...item,
age: values.data.age,
address: values.data.address,
}));
console.log(updatedData); //更新后的数据
}
});
};
</code></pre>
<pre><code class="language-js">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),
];
};
</code></pre>
<p>4、表格数据改变后同步更新表单</p>
<pre><code class="language-js">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);
}, );
</code></pre>
<p>antDesign 的完整代码</p>
<pre><code class="language-js">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 = 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.age,
address: values.data.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);
}, );
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;
</code></pre><br><br>
来源：https://www.cnblogs.com/zsxblog/p/18943522
頁:
[1]