【Ant-Design-Vue】3、表格组件入门

【Ant-Design-Vue】表格组件入门

---

更多关于Ant-Design-Vue

【Ant-Design-Vue】1、简介与安装
【Ant-Design-Vue】2、基础组件介绍
【Ant-Design-Vue】3、表格组件入门
【Ant-Design-Vue】4、动态表头的实现
【Ant-Design-Vue】5、表格数据填充
【Ant-Design-Vue】6、表格的高级功能
【Ant-Design-Vue】7、表格事件与交互
【Ant-Design-Vue】8、综合示例：动态表头与数据填充

---

1. 引言

表格是数据展示和操作的常用组件，尤其在管理系统和数据密集型应用中，表格的使用频率非常高。Ant-Design-Vue 提供了功能强大的 Table 组件，支持排序、筛选、分页等多种功能。本节将介绍如何使用 Ant-Design-Vue 的 Table 组件，并创建一个基本的静态表格。

2. Table 组件介绍

Ant-Design-Vue 的 Table 组件用于展示结构化的数据，具有高度的灵活性和可定制性。它支持多种功能，包括分页、排序、筛选、行选择等。下面我们将通过几个示例来展示 Table 组件的基本用法。

2.1 基本用法

要创建一个基本的静态表格，我们需要定义表格的数据源 dataSource 和列配置 columns。

2.1.1 数据源

数据源是一个数组，每个元素表示表格中的一行数据。数据源的每一项必须有一个唯一的 key 属性，以便表格能够正确地管理行状态。

2.1.2 列配置

列配置是一个数组，每个元素表示表格中的一列。每个列配置对象需要包含以下属性：

• title：列标题。
• dataIndex：数据索引，用于指定数据源中的字段。
• key：列的唯一标识符。

以下是一个简单的静态表格示例：

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

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
      ],
      dataSource: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
        },
      ],
    };
  },
};
</script>

在上面的示例中，我们定义了三列：Name、Age 和 Address，并为每列指定了相应的数据索引。数据源包含三行数据，每行数据都有一个唯一的 key 属性。

2.2 添加边框和表头背景

我们可以通过设置 bordered 属性来为表格添加边框，通过 rowSelection 属性来为表格添加行选择功能：

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

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
      ],
      dataSource: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
        },
      ],
    };
  },
};
</script>

2.3 自定义列内容

有时，我们需要在表格的某些单元格中显示自定义内容。可以通过 scopedSlots 属性来实现这一点。以下示例展示了如何在 Age 列中添加一个标签：

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

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
          scopedSlots: { customRender: 'age' },
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
      ],
      dataSource: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
        },
      ],
    };
  },
};
</script>

<template #age="{ text }">
  <a-tag color="blue">{{ text }}</a-tag>
</template>

在上面的示例中，我们使用 scopedSlots 属性为 Age 列指定了一个自定义渲染函数，该函数在模板中实现，使用标签组件来显示年龄。

2.4 表格分页

Ant-Design-Vue 的 Table 组件内置了分页功能，分页配置通过 pagination 属性进行控制。以下示例展示了如何启用分页：

<template>
  <a-table :columns="columns" :dataSource="dataSource" :pagination="{ pageSize: 2 }" bordered />
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
      ],
      dataSource: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
        },
        {
          key: '4',
          name: 'Jim Red',
          age: 32,
          address: 'London No. 2 Lake Park',
        },
      ],
    };
  },
};
</script>

在上面的示例中，我们通过设置 pagination 属性启用了分页功能，并将每页显示的行数设置为 2。

3. 结论

通过本节的介绍，我们了解了如何使用 Ant-Design-Vue 的 Table 组件创建一个基本的静态表格，并了解了如何添加边框、自定义列内容以及启用分页等功能。Table 组件是展示和操作数据的强大工具，掌握其用法可以显著提升我们的开发效率。在接下来的章节中，我们将继续探讨表格的高级功能，包括排序、筛选和动态表头等内容。