QueryTable

长念阅读约 6 分钟1 年前发布1 年前编辑

© 转载需要保留原始链接，未经明确许可，禁止商业使用。支持原创 CC BY-NC-SA 4.0

危险

✂️ 当前组件已停止更新维护，如遇问题，需自行修复！

基于 Element React 的 Form 组件和 Choerodon UI 的 Table 组件封装的查询表格组件。

特性说明

• 支持 DataSet 配置自动生成 QueryForm 查询表单；
• 理论上支持 Table 的所有属性

何时使用

• 兼容使用 Table 的所有场景

基本用法

import { QueryTable } from '@/components/element-pro';

export default () => {
  return (
    <QueryTable
      rowNumber
      rowNumberColumnProps={rowNumberColumnProps}
      dataSet={dataSet}
      columns={columns}
      withSpace
    />
  );
};

API

除此以下附加属性外，支持 Table 所有属性。

参数	类型	说明	默认值
elButtons	ElButton | ElButton[]	可选 表格上方的按钮组，支持 Element 按钮（组）	-
wrapperStyle	React.CSSProperties	可选 用于手动渲染数据的 DataSet；优先级高于 dataSet	-
wrapperClassName	string	可选 用于手动渲染的数据，未使用 dataSet 的情况；优先级最高，高于 options	-
withSpace	boolean	可选 查询表单与顶部的间距 10px	false
excludeFields	PickedQueryFormProps	可选 参考 QueryForm	-

PickedQueryFormProps

详情参考 QueryForm。

type PickedQueryFormProps = Pick<
  QueryFormProps,
  | 'excludeFields'
  | 'queryFieldsProps'
  | 'queryFormProps'
  | 'autoQuery'
  | 'autoQueryAfterReset'
  | 'afterQuery'
  | 'afterReset'
  | 'cascadeMap'
>;

源代码

QueryTable/index.tsx

import { Table } from 'choerodon-ui/pro';
import { QuickJumperPosition, SizeChangerPosition } from 'choerodon-ui/pro/lib/pagination/enum';
import { TableQueryBarType } from 'choerodon-ui/pro/lib/table/enum';
import { TableProps } from 'choerodon-ui/pro/lib/table/Table';
import cls from 'classnames';
import { Button } from 'element-react';
import { observer } from 'mobx-react';
import React from 'react';
import styles from './index.module.less';
import QueryForm, { QueryFormProps } from './QueryForm';

type PickedQueryFormProps = Pick<
  QueryFormProps,
  | 'excludeFields'
  | 'queryFieldsProps'
  | 'queryFormProps'
  | 'autoQuery'
  | 'autoQueryAfterReset'
  | 'afterQuery'
  | 'afterReset'
  | 'cascadeMap'
>;

// element 按钮
export type ElButton = React.ReactElement<React.ComponentProps<typeof Button>>;
/**
 * @see https://changnian.netlify.app/docs/c7n/custom-components/element-react/query_table
 */
export interface QueryTableProps extends TableProps, PickedQueryFormProps {
  /**
   * @description table 上方的按钮组，支持 Element 按钮(组)
   */
  elButtons?: ElButton | ElButton[];

  wrapperStyle?: React.CSSProperties;

  wrapperClassName?: string;
  /**
   * @description 查询表单与顶部的间距 10
   * @default false
   */
  withSpace?: boolean;
}

const QueryTable: React.FC<QueryTableProps> = ({
  dataSet,
  columns,
  queryBar,
  elButtons,
  afterQuery,
  afterReset,
  wrapperStyle = {},
  wrapperClassName = '',
  className,
  withSpace = false,
  excludeFields = [],
  queryFormProps = {},
  queryFieldsProps = {},
  cascadeMap = {},
  autoQuery = true,
  autoQueryAfterReset = true,
  ...restProps
}) => {
  return (
    <div className={wrapperClassName} style={{ marginTop: withSpace ? 0 : -10, ...wrapperStyle }}>
      {queryBar !== TableQueryBarType.none && (
        <QueryForm
          dataSet={dataSet}
          // defaultValues={defaultValues}
          excludeFields={excludeFields}
          afterQuery={afterQuery}
          afterReset={afterReset}
          queryFormProps={queryFormProps}
          queryFieldsProps={queryFieldsProps}
          cascadeMap={cascadeMap}
          autoQuery={autoQuery}
          autoQueryAfterReset={autoQueryAfterReset}
        />
      )}
      {elButtons && (
        <div
          style={{
            width: '100%',
            display: 'flex',
            justifyContent: 'flex-end',
            alignItems: 'center',
            marginBottom: 16,
          }}
        >
          {elButtons}
        </div>
      )}
      <Table
        dataSet={dataSet}
        queryBar={TableQueryBarType.none}
        columns={columns}
        className={cls(styles.table, className)}
        style={{ clear: 'both' }}
        pagination={{
          className: styles.nav__pagination,
          showPager: true,
          showQuickJumper: true,
          showSizeChangerLabel: true,
          pageSizeOptions: ['10', '15', '20', '30', '40', '50', '100'],
          quickJumperPosition: QuickJumperPosition.right,
          sizeChangerPosition: SizeChangerPosition.right,
          sizeChangerOptionRenderer: ({ text }) => {
            return `${text} 条/页`;
          },
          showTotal: (total: number, _range: [number, number], _counting: any, page: number) => {
            return (
              <span>
                共 {total} 条记录 第 {page}/{dataSet.totalPage} 页
              </span>
            );
          },
        }}
        {...restProps}
      />
    </div>
  );
};

export default observer(QueryTable);

更新日志

alpha

2024-11-14

• 🍋 同步 QueryForm 新增属性支持；
• 🍋 代码逻辑优化；

2024-10-28

• 🎉 同步 QueryForm 新增属性支持；

2024-08-28

• 🎉 新增 excludeFields 剔除不需要渲染的字段；

2024-08-21

• 🎉 新增 afterQuery 回调函数；

2024-08-14

• 🎉 拆分 QueryForm QueryTable 组件；

2024-07-24

• 🎉 新增 QueryTable 组件；