antd-vue + vue3 实现a-table动态增减行，通过a-from实现a-table行内输入验证， form嵌套两个table实现检验。

原创

已于 2025-02-18 16:29:51 修改 · 5k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-11-08 17:01:39 首次发布

本文介绍了如何在Vue项目中使用ElementUI实现表单和表格的数据同步，并配合验证规则确保数据正确性，以及处理嵌套表单的场景。

个人博客（vue3 + nodejs + mysql ）http://snows-l.site

注意：table的dataSource与form的mode必须是同一个数组

一、效果图

图一：校验效果

二、主要代码

注意：

1、form 与 table 绑定的是同一个数据 tableSource 并且是一个数据（ElementUI 需要对象包数组）

2、form用的是 name 绑定 -> :name="[index, 'vlan_id']"

3、form-item 总要需要加上 rules -> :rules="rules.blur"

<a-form ref="tableFormRef" :model="tableSource" :label-col="{ style: { width: '10px' } }" :wrapper-col="{ span: 0 }" :rules="rules">
  <a-table
    class="ant-table-striped"
    bordered
    :dataSource="tableSource"
    :columns="tableColumns"
    :pagination="false"
    :scroll="{ x: 1260 }"
    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">

    <template #bodyCell="{ column, text, record, index }">

      <template v-if="column.dataIndex == 'vlan_id'">
        <a-form-item class="custom-form-item" label=" " :name="[ind