antdesignvue table+form表单校验

根据提供的引用内容，ant-design-vue可以通过内置的Form组件和Table组件实现表格内部字段验证功能。具体步骤如下：

1. 在表格中添加需要验证的字段，例如下面的代码中的name和age字段：

<a-form :form="form">
  <a-form-item label="Name" :rules="[{ required: true, message: 'Please input name' }]">
    <a-input v-decorator="['name']" />
  </a-form-item>
  <a-form-item label="Age" :rules="[{ required: true, message: 'Please input age' }]">
    <a-input-number v-decorator="['age']" />
  </a-form-item>
</a-form>
<a-table :columns="columns" :dataSource="dataSource" :pagination="false" />

2. 在表格中添加操作列，例如下面的代码中的操作列包含了编辑和删除按钮：

<a-table :columns="columns" :dataSource="dataSource" :pagination="false">
  <template #action="text, record">
    <a-button @click="edit(record)">Edit</a-button>
    <a-button @click="delete(record)">Delete</a-button>
  </template>
</a-table>

3. 在编辑操作中打开表单，并将当前行的数据绑定到表单中：

edit(record) {
  this.form.setFieldsValue(record);
  this.editingKey = record.key;
}

4. 在表单中添加保存按钮，并在点击保存按钮时进行表单验证和数据更新：

<a-form :form="form">
  <a-form-item label="Name" :rules="[{ required: true, message: 'Please input name' }]">
    <a-input v-decorator="['name']" />
  </a-form-item>
  <a-form-item label="Age" :rules="[{ required: true, message: 'Please input age' }]">
    <a-input-number v-decorator="['age']" />
  </a-form-item>
  <a-form-item>
    <a-button type="primary" @click="save">Save</a-button>
  </a-form-item>
</a-form>

save() {
  this.form.validateFields((err, values) => {
    if (!err) {
      const newData = [...this.dataSource];
      const index = newData.findIndex((item) => this.editingKey === item.key);
      if (index > -1) {
        const item = newData[index];
        newData.splice(index, 1, { ...item, ...values });
        this.dataSource = newData;
        this.editingKey = '';
      } else {
        newData.push(values);
        this.dataSource = newData;
        this.editingKey = '';
      }
    }
  });
}