buerui
v0.6.7
Published
A react library developed with dumi
Downloads
75
Readme
buerui
开发组件库推荐使用 node 版本:18.15.0,且使用 yarn 来按照依赖
📦 安装
npm install buerui --save
# 或者使用 yarn
yarn add buerui
# 或者使用 cnpm
cnpm install buerui --save
# 或者使用 pnpm
pnpm install buerui --save
⚙️ 配置
SearchList 组件支持以下配置项:
- url(必需):请求数据的 API 地址。
- searchSchema(必需):搜索表单的配置数组。
- tableColumns(必需):表格列的配置数组。
🔨 使用 2
import { SearchList } from 'boolean-ftl';
import { Card } from 'antd';
import { useState, useEffect } from 'react';
const List = () => {
// 表格列配置
const tableSchema = [
{
title: 'id',
dataIndex: 'id',
},
{
title: '姓名',
dataIndex: 'name',
},
{
title: '年龄',
dataIndex: 'age',
},
];
// 搜索表单配置
const searchSchemaArr = [
{
label: '输入框',
type: 'input',
key: 'input',
},
{
label: '选择框',
type: 'select',
key: 'select',
oplist: [
{
name: '选项1',
value: '1',
},
{
name: '选项2',
value: '2',
},
],
},
{
label: '时间',
type: 'rangePicker',
key: 'rangePicker',
},
];
return (
<Card>
<SearchList
url="/api/list"
searchSchema={searchSchemaArr}
tableColumns={tableSchema}
/>
</Card>
);
};
export default List;
API
SearchList Props
| 属性名 | 类型 | 默认值 | 说明 |
| -------------- | --------------- | ------- | ---------------------------------------------- |
| url
| string (必需) | - | 数据请求的 API 端点 URL |
| tableColumns
| array (必需) | - | 表格列的定义,包括标题、数据字段等 |
| searchSchema
| array (可选) | - | 搜索表单的配置,用于筛选数据 |
| exportUrl
| string (可选) | - | 导出数据的 API 端点 URL |
| pagination
| boolean (可选) | true | 是否显示分页器 |
| mergeData
| object (可选) | - | 用于合并数据的配置,包括要合并的列和唯一索引键 |
| useCache
| boolean (可选) | false | 是否启用搜索数据的缓存 |
| cacheId
| string (可选) | - | 缓存标识符,用于唯一标识缓存数据 |
| pageSizeKey
| string (可选) | 'limit' | 列表每页数量的键名 |
| pageKey
| string (可选) | 'page' | 列表页码的键名 |
| getTableData
| function (可选) | - | 用于获取列表数据的回调函数 |