轻松掌握动态列+表头下拉功能，vue+antd大显身手

2023-03-31 20:54:15

深入解析 Vue + Ant Design 中 Table 组件的动态列和表头下拉选择

一、序言

在前端开发中，处理和可视化复杂数据是至关重要的任务。Vue 和 Ant Design 的 Table 组件以其强大功能而闻名，可满足各种数据可视化需求。本文将深入探讨如何利用 Vue + Ant Design 实现 Table 组件的动态列和表头下拉选择功能。

二、动态列

1. 定义列模型

首先，定义一个列模型，指定每一列的标题、数据键和唯一键：

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
];

2. 应用动态列

在 Table 组件中使用动态列，只需传递列模型：

<ATable columns={columns} dataSource={data} />

三、表头下拉选择

1. 定义下拉菜单项

为每个列创建下拉菜单项，指定标签和键：

const menuItems = [
  {
    label: '姓名',
    key: 'name',
  },
  {
    label: '年龄',
    key: 'age',
  },
];

2. 应用表头下拉选择

在 Table 组件中启用表头下拉选择，设置位置、自定义样式并传递下拉菜单项：

<ATable
  columns={columns}
  dataSource={data}
  dropdown={{
    placement: 'bottomLeft',
    overlayClassName: 'custom-dropdown',
    overlay: <DropdownOverlay menuItems={menuItems} />,
  }}
/>

四、示例代码

以下是一个完整的示例代码，展示了如何实现动态列和表头下拉选择：

import { Table, Dropdown, Menu } from 'antd';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
];

const menuItems = [
  {
    label: '姓名',
    key: 'name',
  },
  {
    label: '年龄',
    key: 'age',
  },
];

const DropdownOverlay = ({ menuItems }) => {
  return (
    <Menu>
      {menuItems.map((item) => {
        return <Menu.Item key={item.key}>{item.label}</Menu.Item>;
      })}
    </Menu>
  );
};

const App = () => {
  const data = [
    {
      name: 'John',
      age: 30,
    },
    {
      name: 'Mary',
      age: 25,
    },
  ];

  return (
    <div>
      <Table
        columns={columns}
        dataSource={data}
        dropdown={{
          placement: 'bottomLeft',
          overlayClassName: 'custom-dropdown',
          overlay: <DropdownOverlay menuItems={menuItems} />,
        }}
      />
    </div>
  );
};

export default App;