1. 简单一点首页
  2. 编程

深度解析Ant Design中Table组件的使用

DGQJQ • • 编程

一、Antd表格兼容

Antd是一个基于React的UI框架，Table组件是其重要的组成部分之一。该组件可在各种浏览器和设备上进行良好的兼容。同时，它还提供了多个版本的Antd框架，包括React和Vue版本，以满足不同的开发需求。

以下是Antd表格的基本用法：

{
  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',
    },
  ];

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  <Table dataSource={dataSource} columns={columns} />;
}

二、Antd是个UI框架吗

Antd是基于React的UI框架，它提供了一组易于使用、高质量的UI组件，以便加速Web应用程序的开发。除了Table组件，Antd还包括布局、表单、导航、图表等组件。

以下是Antd中选择器组件的示例：

{
  import { Select } from 'antd';

  const { Option } = Select;

  function handleChange(value) {
    console.log('selected', value);
  }

  <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="disabled" disabled>
      Disabled
    </Option>
    <Option value="Yiminghe">yiminghe</Option>
  </Select>
}

三、Antd表格分页

Antd提供了一个内置的Pagination组件，可用于表格分页。默认情况下，表格不分页。当数据量很大时，我们可以启用分页以提高用户体验。

以下是Antd表格分页组件的基本用法：

{
  import { Table, Pagination } from 'antd';

  function onShowSizeChange(current, pageSize) {
    console.log(current, pageSize);
  }

  function onChange(pageNumber) {
    console.log('Page: ', pageNumber);
  }

  const dataSource = [...];

  const columns = [...];

  <div>
    <Table dataSource={dataSource} columns={columns} pagination={{ pageSize: 5 }} />
    <Pagination showSizeChanger onShowSizeChange={onShowSizeChange} defaultCurrent={3} total={50} onChange={onChange} />
  </div>;
}

四、Antd表格宽度设置不生效

Antd表格中宽度的设置可以使用固定值或百分比值，但是有时候会出现宽度设置不生效的问题。

这时可以考虑使用fixed属性来设置列的宽度。对于需要固定宽度的列，将其fixed属性设置为”left”或”right”即可。

以下是Antd表格列宽度设置的示例：

{
  const dataSource = [...];

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      width: 150,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      width: 100,
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: 'Action',
      key: 'action',
      fixed: 'right',
      width: 100,
      render: () => <a>Delete</a>,
    },
  ];

  <Table dataSource={dataSource} columns={columns} scroll={{ x: 500 }} />;
}

五、Antd表格排序

Antd提供了一种方便的方式对表格进行排序。您可以在表格列定义中设置sorter属性，然后通过编程方式激活排序。

以下是Antd表格排序的示例：

{
  const dataSource = [...];

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      sorter: (a, b) => a.name.localeCompare(b.name),
      sortDirections: ['descend', 'ascend'],
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      sorter: (a, b) => a.age - b.age,
      sortDirections: ['descend', 'ascend'],
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  <Table dataSource={dataSource} columns={columns} />;
}

六、Antd组件

除了Table组件之外，Antd还提供了许多其他组件，可以用来加速Web应用程序的开发。

以下是Antd中常用组件的示例：

{
  import { Button, Input, Badge } from 'antd';

  function handleClick(e) {
    console.log('click button');
  }

  <div>
    <Button type="primary" onClick={handleClick} style={{ marginBottom: 16 }}>
      Primary Button
    </Button>
    <Input placeholder="Basic usage" defaultValue="Antd Input Component" style={{ marginBottom: 16 }} />
    <Badge count={5} style={{ backgroundColor: '#4CAF50' }}>
      <a href="/" className="head-example" />
    </Badge>
  </div>;
}

七、Antd表格拖拽

Antd表格支持拖拽调整列宽和列排序。只需将Table组件的dragable属性设置为true即可启用拖拽功能。

以下是Antd表格拖拽功能的示例：

{
  const dataSource = [...];

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      width: 150,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      width: 100,
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  <Table dataSource={dataSource} columns={columns} dragable />;
}

八、Antd表格删除后多选还在

Antd表格在删除操作时会自动取消多选状态，但如果您手动管理选择状态，则需要手动取消选中状态。

以下是Antd表格删除操作的示例：

{
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  function handleDelete() {
    // 判断是否选中某一行，如果是，则移除该行
    if (selectedRowKeys.length > 0) {
      setSelectedRowKeys([]); // 取消选择
    }
  }

  const dataSource = [...];

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      width: 150,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      width: 100,
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  <Table
    dataSource={dataSource}
    columns={columns}
    rowSelection={{
      selectedRowKeys,
      onChange: (selectedKeys) => setSelectedRowKeys(selectedKeys),
    }}
  />
  <Button onClick={handleDelete}>Delete</Button>;
}

九、Antd表格排序 取消排序

Antd表格支持取消排序。只需要将sortOrder属性从”descend”或”ascend”设置为null即可取消排序。

以下是Antd表格取消排序的示例：

{
  const dataSource = [...];

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      sorter: (a, b) => a.name.localeCompare(b.name),
      sortDirections: ['descend', 'ascend'],
      sortOrder: null,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      sorter: (a, b) => a.age - b.age,
      sortDirections: ['descend', 'ascend'],
      sortOrder: null,
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  <Table dataSource={dataSource} columns={columns} />;
}

十、Antd表格内容过多隐藏

Antd表格在内容过多时，可以通过ellipsis属性来隐藏内容。只需要在列定义中设置ellipsis为true即可。

以下是Antd表格内容隐藏的示例：

{
  const dataSource = [...];

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
      ellipsis: true,
    },
  ];

  <Table dataSource={dataSource} columns={columns} />;
}

以上就是Antd表格的详细介绍，Antd提供了丰富的组件和功能，使得Web应用程序的开发更加简单和快捷。在实际开发中，您可以根据具体需求选择合适的组件和功能。

原创文章，作者：DGQJQ，如若转载，请注明出处：https://www.506064.com/n/372792.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
DGQJQDGQJQ
0
上一篇 2025-04-25 15:26
下一篇 2025-04-25 15:26

相关推荐

  • 如何修改ant组件的动效为中心

    当我们使用Ant Design时，其默认的组件动效可能不一定符合我们的需求，这时我们需要修改Ant Design组件动效，使其更加符合我们的UI设计。本文将从多个方面详细阐述如何修…

    编程 2025-04-29

  • 深度查询宴会的文化起源

    深度查询宴会，是指通过对一种文化或主题的深度挖掘和探究，为参与者提供一次全方位的、深度体验式的文化品尝和交流活动。本文将从多个方面探讨深度查询宴会的文化起源。 一、宴会文化的起源 …

    编程 2025-04-29

  • Ant Design组件的动效

    Ant Design是一个基于React技术栈的UI组件库，其中动效是该组件库中的一个重要特性之一。动效的使用可以让用户更清晰、更直观地了解到UI交互的状态变化，从而提高用户的满意…

    编程 2025-04-29

  • Python下载深度解析

    Python作为一种强大的编程语言，在各种应用场景中都得到了广泛的应用。Python的安装和下载是使用Python的第一步，对这个过程的深入了解和掌握能够为使用Python提供更加…

    编程 2025-04-28

  • Python递归深度用法介绍

    Python中的递归函数是一个函数调用自身的过程。在进行递归调用时，程序需要为每个函数调用开辟一定的内存空间，这就是递归深度的概念。本文将从多个方面对Python递归深度进行详细阐…

    编程 2025-04-27

  • Spring Boot本地类和Jar包类加载顺序深度剖析

    本文将从多个方面对Spring Boot本地类和Jar包类加载顺序做详细的阐述，并给出相应的代码示例。 一、类加载机制概述 在介绍Spring Boot本地类和Jar包类加载顺序之…

    编程 2025-04-27

  • 用mdjs打造高效可复用的Web组件

    本文介绍了一个全能的编程开发工程师如何使用mdjs来打造高效可复用的Web组件。我们将会从多个方面对mdjs做详细的阐述，让您轻松学习并掌握mdjs的使用。 一、mdjs简介 md…

    编程 2025-04-27

  • 深度解析Unity InjectFix

    Unity InjectFix是一个非常强大的工具，可以用于在Unity中修复各种类型的程序中的问题。 一、安装和使用Unity InjectFix 您可以通过Unity Asse…

    编程 2025-04-27

  • Spring MVC主要组件

    Spring MVC是一个基于Java语言的Web框架，是Spring Framework的一部分。它提供了用于构建Web应用程序的基本架构，通过与其他Spring框架组件集成，使…

    编程 2025-04-27

  • Mescroll.js——移动端下拉刷新和上拉加载更多组件

    一、概述 Mescroll.js是一款移动端的下拉刷新和上拉加载更多组件，因其简单易用和功能强大而深受开发者的喜爱。Mescroll.js可以应用于各种移动端网站和APP，能够支持…

    编程 2025-04-25

发表回复

登录后才能评论