用Ant Design Vue创建优雅的a-table表格，轻松插入Switch开关按钮

2023-12-16 21:12:52

在 Ant Design Vue 中运用 a-table：轻松创建可交互数据表格

在构建现代化且响应式的前端应用程序时，数据表格扮演着至关重要的角色。Ant Design Vue 为我们提供了功能强大的 a-table 组件，让我们轻松创建美观且可交互的数据表格。

构建一个基本的 a-table 表格

首先，让我们导入 a-table 组件：

import { Table, TableColumn } from 'ant-design-vue';

然后，在模板中使用它：

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

在这里，tableData 是数据源，tableColumns 定义了表格中的列。

插入一个 Switch 开关按钮

要将 Switch 开关按钮插入表格，我们需要在 tableColumns 中添加一个新的列定义：

{
  title: 'Status',
  dataIndex: 'status',
  key: 'status',
  scopedSlots: { customRender: 'status' }
}

接下来，在模板中定义 customRender 函数：

<template slot="status" slot-scope="record">
  <a-switch v-model="record.status" @change="handleSwitchChange" />
</template>

在这里，我们使用 Ant Design Vue 的 Switch 组件创建了一个 Switch 开关按钮。

处理 Switch 开关按钮事件

最后，让我们处理 Switch 开关按钮的 change 事件：

handleSwitchChange(record) {
  console.log(record.status);
}

代码示例

import { Table, TableColumn, Button, Switch } from 'ant-design-vue';

export default {
  components: {
    'a-table': Table,
    'a-table-column': TableColumn,
    'a-button': Button,
    'a-switch': Switch
  },
  data() {
    return {
      tableData: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
          status: true
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Street',
          status: false
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 36,
          address: 'Sidney No. 1 Ocean View',
          status: true
        }
      ],
      tableColumns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age'
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address'
        },
        {
          title: 'Status',
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' }
        }
      ]
    };
  }
};