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

一、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/zh-tw/n/372792.html