antd/lib/table#TablePaginationConfig TypeScript Examples

// istanbul ignore next
  private frontendSearch(
    pagination: TablePaginationConfig,
    filters: Record<string, string[]>,
    sorter: SorterResult<Record<string, any>>
  ): void {
    this.sort = isNil(sorter.order) ? null : (sorter.columnKey as string);
    this.order = isNil(sorter.order) ? null : this._fields[sorter.order];
  }

/**
   * @kind false | TablePaginationConfig
   * @required false
   * @default -
   * @description 是否显示分页，影响优先级低于configProps.pagination
   */
  @property({
    attribute: false,
  })
  pagination: false | TablePaginationConfig;

private _handleOnChange = (
    pagination: TablePaginationConfig,
    filters: Record<string, string[]>,
    sorter: SorterResult<Record<string, any>>
  ): void => {
    // 排序
    if (sorter.columnKey !== this.sort || sorter.order !== this.order) {
      if (sorter.columnKey && sorter.order) {
        this.sort = sorter.columnKey as string;
        this.order = sorter.order;
      } else {
        this.sort = null;
        this.order = null;
      }
      this.sortUpdate.emit({
        sort: this.sort,
        order: this.order,
      });
    }
  };

private _handleOnChange = (
    pagination: TablePaginationConfig,
    filters: Record<string, string[]>,
    sorter: SorterResult<Record<string, any>>
  ): void => {
    const history = getHistory();
    const urlSearchParams = new URLSearchParams(history.location.search);
    // 分页
    if (!isEmpty(pagination)) {
      if (pagination.pageSize !== this.pageSize) {
        pagination.current = 1;
        urlSearchParams.set("page", "1");
        urlSearchParams.set("pageSize", pagination.pageSize.toString());
        this.filterUpdate.emit({
          [this._fields.pageSize]: pagination.pageSize,
          [this._fields.page]: 1,
        });
        this.page = 1;
        this.pageSize = pagination.pageSize;
      } else if (pagination.current !== this.page) {
        const newPage = pagination.current || 1;
        urlSearchParams.set("page", newPage.toString());
        this.pageUpdate.emit({
          [this._fields.page]: newPage, // 可配置的 path
        });
        this.page = newPage;
      }
    }
    this.filters = filters;
    // 过滤
    if (!isEmpty(filters)) {
      forEach(filters, (value: any, key) => {
        isNil(value) || value.length === 0
          ? urlSearchParams.delete(key)
          : urlSearchParams.set(key, value);
      });
    }
    // 排序
    if (
      sorter.columnKey !== this.sort ||
      this._fields[sorter.order] !== this.order
    ) {
      if (sorter.columnKey && sorter.order) {
        urlSearchParams.set("sort", sorter.columnKey as string);
        urlSearchParams.set("order", this._fields[sorter.order].toString());
        this.sort = sorter.columnKey as string;
        this.order = this._fields[sorter.order];
      } else {
        urlSearchParams.delete("sort");
        urlSearchParams.delete("order");
        this.sort = null;
        this.order = null;
      }
      this.sortUpdate.emit({
        sort: this.sort,
        order: this.order,
      });
    }
    if (this.frontSearch) {
      if (this.shouldUpdateUrlParams) {
        history.push(`?${urlSearchParams}`, { notify: false });
      }
      this.frontendSearch(pagination, filters, sorter);
    } else {
      if (this.shouldUpdateUrlParams) {
        history.push(`?${urlSearchParams}`, {
          notify: !!this.shouldRenderWhenUrlParamsUpdate,
        });
      }
    }
  };

private _initConfigProps = () => {
    // 默认分页配置
    const defaultPagination: TablePaginationConfig = {
      current: this.page,
      pageSize: this.pageSize,
      total: this._total,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "50"],
      // eslint-disable-next-line react/display-name
      showTotal: (totals) => (
        <>
          <span className={paginationStyle.totalText}>
            {i18n.t(`${NS_PRESENTATIONAL_BRICKS}:${K.PAGINATION_TOTAL_TEXT}`)}{" "}
            <strong className={paginationStyle.total}>{totals}</strong>{" "}
            {i18n.t(`${NS_PRESENTATIONAL_BRICKS}:${K.PAGINATION_TOTAL_UNIT}`)}
          </span>
          {this.configProps?.rowSelection &&
            this.showSelectInfo &&
            this.selectedRowKeys.length !== 0 &&
            this.renderSelectInfo()}
        </>
      ),
    };

    const rowKey =
      this.rowKey ?? this._fields.rowKey ?? this.configProps?.rowKey;
    let rowDisabledConfig: RowDisabledProps[];

    if (this.rowDisabledConfig) {
      rowDisabledConfig = Array.isArray(this.rowDisabledConfig)
        ? this.rowDisabledConfig
        : [this.rowDisabledConfig];
    }

    // 当 rowSelection 为 true 或者有相关配置的时候的默认行选择配置
    const defaultRowSelection: TableRowSelection<any> = {
      ...(rowKey
        ? {
            selectedRowKeys: this._isInSelect
              ? this.selectedRowKeys
              : this.storeCheckedByUrl
              ? this._getCheckedFromUrl()
              : this.defaultSelectAll
              ? this._handleDefaultSelectAll()
              : this.selectedRowKeys,
            onSelect: this._handleOnSelect,
            onSelectAll: this._handleSelectAll,
            onChange: this._handleRowSelectChange,
            preserveSelectedRowKeys: true,
          }
        : {
            // 当用户没有设置rowKey时的兼容处理
            onChange: this._handleRowSelectChange,
            preserveSelectedRowKeys: true,
          }),
      getCheckboxProps: (record: any) => {
        if (
          !isEmpty(this._disabledChildrenKeys) &&
          this._disabledChildrenKeys.includes(get(record, rowKey))
        ) {
          return {
            disabled: true,
          };
        }
        if (!rowDisabledConfig) return {};

        return {
          disabled: rowDisabledConfig.some((config) => {
            const { field, value, operator } = config;
            const fun = compareFunMap[operator];

            return fun?.(value, get(record, field));
          }),
        };
      },
    };
    if (this.configProps) {
      this._finalConfigProps = cloneDeep(this.configProps);
      if (this.configProps.pagination !== false) {
        this._finalConfigProps.pagination = {
          ...defaultPagination,
          ...this.pagination,
          ...this.configProps.pagination,
        };
        if (
          (this.configProps.pagination === undefined ||
            this.configProps.pagination === null) &&
          this.pagination === false
        ) {
          this._finalConfigProps.pagination = false;
        }
      }
      if (!this.configProps.size) {
        this._finalConfigProps.size = this.size;
      }
      if (this.configProps.rowSelection) {
        if (this.configProps.rowSelection === true) {
          this._finalConfigProps.rowSelection = {
            ...defaultRowSelection,
            type: this.type ?? "checkbox",
          };
        } else {
          this._finalConfigProps.rowSelection = {
            ...defaultRowSelection,
            type: this.type ?? "checkbox",
            ...this.configProps.rowSelection,
            ...(defaultRowSelection.selectedRowKeys
              ? { selectedRowKeys: defaultRowSelection.selectedRowKeys }
              : {}),
          };
        }
      } else {
        if (this.type) {
          this._finalConfigProps.rowSelection = {
            ...defaultRowSelection,
            type: this.type,
          };
        }
      }
    } else {
      this._finalConfigProps = {};
      this._finalConfigProps.pagination =
        this.pagination !== false ? defaultPagination : false;
      this._finalConfigProps.size = this.size;
      this._finalConfigProps.rowSelection = this.type && {
        ...defaultRowSelection,
        type: this.type,
      };
    }

    // 初始化列排序
    if (this._columns) {
      this._columns = this._columns.map((item) => {
        if (isNil(item.key)) {
          item.key = item.dataIndex as string;
        }
        if (item.sorter) {
          item.sortOrder = (this.sort === item.key &&
            !isNil(this.order) &&
            (this._fields.ascend === this.order
              ? "ascend"
              : "descend")) as SortOrder;
        }
        // 初始化表头过滤值
        if (item.filters) {
          const history = getHistory();
          const urlSearchParams = new URLSearchParams(history.location.search);
          const filteredValue =
            urlSearchParams.get(item.key as string) ??
            get(this.filters, item.key)?.join(",");
          if (!isNil(filteredValue) && !isEmpty(filteredValue)) {
            item.filtered = true;
            item.filteredValue = filteredValue
              .split(",")
              .map(
                (v) =>
                  find(item.filters, (f) => String(f.value) === v)?.value ?? v
              );
          } else {
            item.filtered = false;
            item.filteredValue = [];
          }
        }
        return item;
      });
    }
  };