Have ideas to improve npm?Join in the discussion! »

armour-antd

0.0.13 • Public • Published

armour-antd

基于 Ant Design 封装的定制化功能组件库。

安装

使用 npm 或者 yarn 安装:

$ npm install armour-antd --save

$ yarn add armour-antd

如果网络状况不佳可以使用 cnpm 安装。

示例

import { BatchOperationTables } from 'armour-antd';
 
ReactDOM.render(<BatchOperationTables/>, mountNode);

按需加载

使用 babel-plugin-armour-import 插件, 在 .babelrc 或者 webpack 配置文件 babel-loader 配置项中进行配置。

plugins: [
  [
    'armour-import',
    { libararyName: 'armour-antd' }
  ]
]

然后只需从 armour-antd 引入模块即可,无需单独引入样式,等同于下面手动引入的方式。

import { BatchOperationTables } from 'armour-antd';

手动引入

import BatchOperationTables from 'armour-antd/dist/components/BatchOperationTables';

组件使用

BatchOperationTables 组件

该组件用于帮助收集 Ant DesignTable 组件通过请求每页数据变化时,所有被勾选的数据,同时提供收集数据列表方便你进一步操作选中数据,并在页码切换渲染每页新数据时帮你回显已收集数据的勾选状态,处理收集数据列表操作和数据表格勾选操作时勾选状态的联动。

Example

API

参数 说明 类型 默认值
columns 表格列的配置描述,同 Ant DesignTable , 具体见 https://ant.design/components/table-cn/#Column ColumnProps[] -
dataSource 数据数组 object[] []
rowId dataSource 中每一项数据的唯一标识字段 string 'id'
selectedRows 存储数据表格中被选中项,可以是父级组件的 stateredux 等状态管理的 state 中某一个属性的引用 object[] []
total 数据表格的数据总数,用于实现分页功能 number 0
current 分页器默认选中的页码 number 1
pageSize 数据表格默认每页数据条数 number 10
collectTable 是否展示已选中数据列表,如果显示,则 columns 配置第一项为序号配置,最后一项为操作配置 boolean false
showQuickJumper 是否可以快速跳转至某页,该配置同时在数据表格和已选中数据列表生效 boolean false
showSizeChanger 是否可以改变 pageSize,该配置同时在数据表格和已选中数据列表生效 boolean false
loading 是否加载 loading,同 Ant DesignTable 中的 loading,该配置同时在数据表格和已选中数据列表生效 boolean false
pageSizeOptions 指定每页可以显示多少条,该配置同时在数据表格和已选中数据列表生效 string[] ['10', '20', '30', '40', '50']
updatePagination 修改数据表格分页器页码 current 和每页条数 pageSize 时触发,提供当前选中页码数和每页条数 Function(page, pageSize) noop
ejectCollectData 数据表格勾选状态发生变化时触发,提供所有页码被勾选后的数据合集 Function(selectedRows) noop
styleOptions 用于配置 BatchOperationTables 组件的样式选项集合 styleOptionsProps{} -
textObtions 用于配置 BatchOperationTables 组件的文本选项集合 textObtions{} -

styleOptions

参数 说明 类型 默认值
wrapperStyle 组件容器的类名,用于设置组件容器的样式 string 'default-wrapper-class'
totalStyle 组件数据总数信息的类名,用于设置组件数据总数信息样式 string 'default-total-class'
tableStyle 组件表格容器类名,用于设置组件表格的样式 string 'default-table-class'
size 表格大小,同 Ant DesignTable default | middle | small default
bordered 是否展示外边框和列边框,同 Ant DesignTable boolean false

textObtions

参数 说明 类型 默认值
dataEmptyText 数据表格无数据提示文本 string '暂无数据'
collectEmptyText 已选中数据列表无数据提示文本 string '暂无选中数据'
dataTotalText 数据总数文本 string[] ['共', '项']
collectTotalText 已选中数据总数文本 string[] ['已选择', '项']
sepText 单表格(collectTable 未设置或值为 false)时,数据总数文本和已选中数据总数文本的分隔符,双表格时该配置不生效 string &ensp;

Install

npm i armour-antd

DownloadsWeekly Downloads

2

Version

0.0.13

License

MIT

Unpacked Size

25.1 kB

Total Files

9

Last publish

Collaborators

  • avatar