如何轻松地在andv的Table中使用表单控件并进行校验

前端

2023-09-19 12:53:50

前言

ant-design-vue 的 Table 控件非常强大，它允许我们在表格中使用各种各样的表单控件。但是，官方文档中并没有给出可以定义列的校验规则的示例。这对于需要在表格中进行数据校验的开发人员来说是一个很大的问题。

实现方法

为了解决这个问题，我们可以使用 Form.Item 组件来包装表单控件。Form.Item 组件提供了多种校验规则，我们可以根据需要选择合适的校验规则。

以下是具体步骤：

在表格中使用 Form.Item 组件包装表单控件。
在 Form.Item 组件中设置 rules 属性，并指定校验规则。
在 Form.Item 组件中设置 validateTrigger 属性，并指定触发校验的事件。
在 Form.Item 组件中设置 showValidate 属性，并指定是否显示校验结果。

代码示例

以下是一个代码示例：

<template>
  <a-table :data="dataSource" :columns="columns" />
</template>

<script>
import { Form, FormItem, Input } from 'ant-design-vue';

export default {
  components: { Form, FormItem, Input },
  data() {
    return {
      dataSource: [{
        name: 'Edward King',
        age: 32,
        address: 'London, Park Lane no. 0',
      }, {
        name: 'John Brown',
        age: 42,
        address: 'New York No. 1 Lake Park',
      }, {
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      }, {
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
      }],
      columns: [{
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        render: (text, record) => <FormItem name="name" rules={[{ required: true, message: 'Please input your name!' }]}>
          <Input v-model={record.name} />
        </FormItem>,
      }, {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        render: (text, record) => <FormItem name="age" rules={[{ required: true, message: 'Please input your age!' }]}>
          <Input v-model={record.age} />
        </FormItem>,
      }, {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
        render: (text, record) => <FormItem name="address" rules={[{ required: true, message: 'Please input your address!' }]}>
          <Input v-model={record.address} />
        </FormItem>,
      }],
    };
  },
};
</script>

让控件带有红色边框

为了让控件带有红色边框，我们可以使用 error 类。error 类会将控件的边框颜色设置为红色。

以下是具体步骤：

在 Form.Item 组件中设置 validateStatus 属性，并指定校验结果。
在 Form.Item 组件中添加 error 类。

代码示例

以下是一个代码示例：

<template>
  <a-table :data="dataSource" :columns="columns" />
</template>

<script>
import { Form, FormItem, Input } from 'ant-design-vue';

export default {
  components: { Form, FormItem, Input },
  data() {
    return {
      dataSource: [{
        name: 'Edward King',
        age: 32,
        address: 'London, Park Lane no. 0',
      }, {
        name: 'John Brown',
        age: 42,
        address: 'New York No. 1 Lake Park',
      }, {
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      }, {
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
      }],
      columns: [{
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        render: (text, record) => <FormItem name="name" validateStatus={record.name ? 'success' : 'error'} rules={[{ required: true, message: 'Please input your name!' }]}>
          <Input v-model={record.name} />
        </FormItem>,
      }, {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        render: (text, record) => <FormItem name="age" validateStatus={record.age ? 'success' : 'error'} rules={[{ required: true, message: 'Please input your age!' }]}>
          <Input v-model={record.age} />
        </FormItem>,
      }, {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
        render: (text, record) => <FormItem name="address" validateStatus={record.address ? 'success' : 'error'} rules={[{ required: true, message: 'Please input your address!' }]}>
          <Input v-model={record.address} />
        </FormItem>,
      }],
    };
  },
};
</script>