ProList 开源项目安装与使用指南

ProList 开源项目安装与使用指南

pro-list梦想被 antd 内置的基于 antd 修改的 list项目地址:https://gitcode.com/gh_mirrors/pr/pro-list

项目介绍

ProList是Ant Design生态下的一款高度可定制化的表格组件解决方案，它提供了丰富的功能选项来满足复杂的数据展示需求。无论是简单的数据列表还是复杂的报表分析场景，ProList都能提供出色的用户体验。

项目快速启动

要开始使用ProList，首先确保你的项目中已经包含了React环境以及Ant Design库。接下来，你可以通过npm或yarn将ProList添加到你的项目中：

npm install prolist --save
# 或者使用yarn
yarn add prolist

然后，在你的项目文件中导入ProList并使用它：

import React from 'react';
import { ProList } from '@ant-design/pro-components';

const Demo = () => (
  <ProList
    headerTitle="基础表格"
    toolBarRender={() => [true && <Button key="button">操作按钮</Button>]}
    columns={[
      {
        title: '姓名',
        dataIndex: 'name',
        width: 80,
        ellipsis: true,
      },
      {
        title: '年龄',
        dataIndex: 'age',
        sorter: (a, b) => a.age - b.age,
        defaultSortOrder: 'descend',
      },
      {
        title: '住址',
        dataIndex: 'address',
        render: (text) => <div style={{ maxWidth: '500px' }}>{text}</div>,
      },
    ]}
    data={[
      { name: '张三', age: 32, address: '上海市黄浦区南京路1号'},
      { name: '李四', age: 28, address: '深圳市南山区科技园深南大道9009号'},
      // 更多数据...
    ]}
    rowSelection={{
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      },
    }}
  />
);

export default Demo;

以上示例展示了如何创建一个基础的ProList表格，包括自定义列、排序以及选择行等功能。

应用案例和最佳实践

示例一：复杂搜索表单集成

在实际业务场景中，我们可能需要一个更复杂的搜索表单以过滤大量数据。ProList支持通过配置search属性实现这一功能。

<ProList
  search={{
    expand: true,
    formItems: [
      { type: 'input', name: 'name', label: '姓名', initialValue: '张三' },
      { type: 'dateRangePicker', name: ['startTime', 'endTime'], label: '时间范围' },
    ],
  }}
  // 其他ProList配置...
/>

示例二：自定义渲染单元格

为了更好地适配不同的数据展示需求，ProList允许开发者自定义每一列的渲染逻辑：

render: (text, record) => (
  <Tag color={record.status === 'passed' ? 'green' : 'red'}>{text}</Tag>
)

典型生态项目

• ProTable: 高级表格组件，提供更多样化、更强大的表格交互能力。
• ProForm: 配置式表单组件，简化了复杂表单的设计与开发过程。
• ProCard: 弹性卡片布局组件，适用于构建响应式的界面设计。

这些生态项目共同构成了完整的Ant Design Pro组件库，可以相互配合使用，帮助开发者高效构建高质量的应用系统。

pro-list梦想被 antd 内置的基于 antd 修改的 list项目地址:https://gitcode.com/gh_mirrors/pr/pro-list