boolean-ftl

📦 安装

npm install boolean-ftl --save

# 或者使用 yarn
yarn add boolean-ftl

# 或者使用 cnpm
cnpm install boolean-ftl --save

# 或者使用 pnpm
pnpm install boolean-ftl --save

⚙️ 配置

SearchList 组件支持以下配置项：

• url（必需）：请求数据的 API 地址。
• searchSchema（必需）：搜索表单的配置数组。
• tableColumns（必需）：表格列的配置数组。

🔨 使用

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 (可选) | - | 用于获取列表数据的回调函数 |