TS 类型

这里只列出在配置项中有关联的 TS 类型，并非所有表格 TS 类型。

TableRenderParams

表格 render 参数类型。

export interface TableRenderParams<T extends Record<string, any> = Record<string, any>> extends TableScope<T> {
  /**
   * 传入的原始值
   */
  value: any;
  /**
   * 渲染在单元格的值（大部分等于 value，少部分如使用 options 配置项时，则为 options 配置项的 label 值）
   */
  displayValue: any;
  /**
   * 字典枚举数据
   */
  options: ElOption[];
  /**
   * 其他扩展属性，如果组件自带插槽的数据
   */
  [key: string]: any;
}

TableScope

表格行 Scope。

export type TableScope<T extends Record<string, any> = Record<string, any>> = {
  /**
   * 表格行索引
   */
  $index: number;
  /**
   * 表格行数据
   */
  row: TableRow<T>;
  /**
   * 表格列数据
   */
  column: TableColumn<T>;
  /**
   * 表格行索引
   */
  rowIndex?: number;
  /**
   * 表格列索引
   */
  cellIndex: number;
  /**
   * 表格store
   */
  store: Record<string, any>;
  /**
   * 表格 expanded
   */
  expanded: boolean;
  /**
   * 表格  _self
   */
  _self: Record<string, any>;
};

TableRow

表格行 Row 类型。

export type TableRow<T = Record<string, any>> = T & {
  /**
   * options 字典枚举
   */
  _options: Record<string, ElOption[]>;
  /**
   * 当前列的 option 相关配置，_getValue 里需要使用，因此需要提前缓存起来
   */
  _optionProps: Record<
    string,
    {
      optionField: TableColumn["optionField"];
      transformOption: TableColumn["transformOption"];
      ignoreOptionIfAbsent: TableColumn["ignoreOptionIfAbsent"];
    }
  >;
  /**
   * 获取单元格值
   */
  _getValue: (prop: string) => any;
  /**
   * 获取当前行的数据
   */
  _getData: () => Record<string, any>;
  /**
   * 表格是否可编辑
   */
  _editable: boolean | undefined;
  /**
   * 表格单元格是否可编辑
   */
  _editableCol: Record<string, boolean>;
  /***
   * 编辑态的 ProForm 实例
   */
  _proFormInstance: Record<string, ProFormInstance>;
  /**
   * 开启编辑态方法
   */
  _openCellEdit: (props?: string | string[]) => void;
  /**
   * 停止编辑态方法
   *
   * @reset 是否重置到编辑前的数据
   */
  _closeCellEdit: (props?: string | string[], reset?: boolean) => void;
  /**
   * 重置到编辑前的数据，请先使用 _openCellEdit 后再使用该函数
   */
  _resetCellData: (props?: string | string[]) => void;
  /**
   * 是否处于编辑态方法
   *
   * @mode props 为数组时，可以指定匹配模式，默认 and
   */
  _isCellEdit: (props?: string | string[], mode?: "and" | "or") => boolean;
  /**
   * 校验编辑态表单方法
   */
  _validateCellEdit: (callback?: FormValidateCallback, prop?: string) => FormValidationResult | undefined;
};

PageInfo

分页信息。

export interface PageInfo {
  /**
   * 当前页
   */
  pageNum: number;
  /**
   * 页码数组
   */
  pageSizes?: number[];
  /**
   * 一页显示多少条数据
   */
  pageSize: number;
  /**
   * 总条数
   */
  total?: number;
}

PageField

分页信息的 key 配置。

export interface PageField {
  /**
   * 当前页数字段
   *
   * @default 'pageNum'
   */
  pageNum?: string;
  /**
   * 每页数量字段
   *
   * @default 'pageSize'
   */
  pageSize?: string;
  /**
   * 分页选择器字段
   *
   * @default 'pageSizes'
   */
  pageSizes?: string;
  /**
   * 总页数字段
   *
   * @default 'total'
   */
  total?: string;
}

SelectState

表格选择状态数据，在 selectionChange 事件中返回。

export type SelectState = {
  isSelected: boolean;
  selectedList: Record<string, any>[];
  selectedListIds: string[];
};

SizeStyle

表格样式属性。

export type SizeStyle = {
  rowStyle?: CSSProperties;
  cellStyle?: CSSProperties;
  headerRowStyle?: CSSProperties;
  headerCellStyle?: CSSProperties;
};

ColumnSetting

表格顶部工具栏列配置的配置项类型。

export interface ColumnSetting {
  /**
   * 是否禁用拖拽显示
   *
   * @default false
   */
  hideDragSort?: boolean;
  /**
   * 是否禁用隐藏显示
   *
   * @default false
   */
  hideHidden?: boolean;
  /**
   * 是否禁用排序显示
   *
   * @default false
   */
  hideSortable?: boolean;
  /**
   * 是否禁用筛选显示
   *
   * @default false
   */
  hideFilter?: boolean;
  /**
   * 是否禁用拖拽排序选择
   *
   * @default false
   */
  disabledDragSort?: boolean;
  /**
   * 是否禁用隐藏选择
   *
   * @default false
   */
  disabledHidden?: boolean;
  /**
   * 是否禁用排序选择
   *
   * @default false
   */
  disabledSortable?: boolean;
  /**
   * 是否禁用筛选选择
   *
   * @default false
   */
  disabledFilter?: boolean;
}

BaseSetting

表格顶部工具栏基础配置的配置项类型。

export interface BaseSetting {
  /**
   * 是否开启边框
   *
   * @default false
   */
  border?: boolean;
  /**
   * 是否开启斑马纹
   *
   * @default false
   */
  stripe?: boolean;
  /**
   * 是否开启表头背景色
   *
   * @default true
   */
  headerBackground?: boolean;
  /**
   * 是否开启单击高亮当前行
   *
   * @default true
   */
  highlightCurrentRow?: boolean;
  /**
   * 是否开启显示表头
   *
   * @default true
   */
  showHeader?: boolean;
  /**
   * 是否开启禁用边框选择
   *
   * @default false
   */
  disabledBorder?: boolean;
  /**
   * 是否开启禁用斑马纹选择
   *
   * @default false
   */
  disabledStripe?: boolean;
  /**
   * 是否开启禁用表格高亮选择
   *
   * @default false
   */
  disabledHeaderBackground?: boolean;
  /**
   * 是否开启禁用单击高亮当前行选择
   *
   * @default false
   */
  disabledHighlightCurrentRow?: boolean;
  /**
   * 是否开启禁用单显示表头选择
   *
   * @default false
   */
  disabledShowHeader?: boolean;
}

FilterRule

表格筛选功能的筛选规则类型。

export type FilterRule =
  | "lt"
  | "gt"
  | "le"
  | "ge"
  | "eq"
  | "ne"
  | "like"
  | "notLike"
  | "between"
  | "notBetween"
  | "in"
  | "notIn"
  | ((model: Record<string, any>, row: any, key: string) => boolean) // 自定义函数查询，返回 boolean：true 符合条件，false 不符合条件
  | undefined;

TableFilterProps

表格筛选功能配置项类型，即在 columns 的 filterProps 配置项类型。

import type { PopoverProps } from "element-plus";
import type { FormItemColumnProps } from "@/components/pro/form-item";

export interface TableFilterProps {
  /**
   * 使用的表单组件名
   *
   * @default 'ElInput'
   */
  el?: FormItemColumnProps["el"];
  /**
   * ElFormItem 的 prop 属性，当表单数据 model 为对象时，prop 也是 model 的 key
   */
  prop?: FormItemColumnProps["prop"];
  /**
   * 当前端查询时，指定查询的规则
   *
   * @default 'eq'
   */
  rule?: FilterRule;
  /**
   * ProFormItem props
   */
  formColumn?: FormItemColumnProps;
  /**
   * PopoverProps props
   */
  popoverProps?: Partial<PopoverProps>;
  /**
   * 筛选按钮文字
   *
   * @default '筛选'
   */
  filterText?: string;
  /**
   * 清空按钮文字
   *
   * @default '清空'
   */
  clearText?: string;
  /**
   * 重置按钮文字
   *
   * @default '重置'
   */
  resetText?: string;
  /**
   * 字典数据
   */
  options?: FormItemColumnProps["options"];
  /**
   * 字典指定 label && value && children 的 key 值
   *
   * @default '{ label: "label", value: "value", children: "children", disabled: "disabled" }'
   */
  optionField?: FormItemColumnProps["optionField"];
}

ExportProps

表格导出功能配置项类型，即在 columns 的 exportProps 配置项类型。

import type { AppContext } from "vue";
import type { ElMessageBoxOptions } from "element-plus";

// 导出时列配置项
export enum ExportKey {
  DataKey = "dataKey",
  Label = "label",
  Prop = "prop",
}

export interface ExportProps {
  /**
   * 导出时的表头配置
   *
   * @default 'label'
   */
  mode?: ExportKey | `${ExportKey}`;
  /**
   * 导出的文件名
   *
   * @default 'export-table-时间戳'
   */
  fileName?: string;
  /**
   * ElMessageBox.confirm 的 title
   *
   * @default '请选择导出列'
   */
  title?: string;
  /**
   * ElMessageBox.confirm 的 options
   */
  options?: ElMessageBoxOptions;
  /**
   * ElMessageBox.confirm 的 appContext
   */
  appContext?: AppContext | null;
  /**
   * 自定义导出为文件
   *
   * @param data 表格数据
   */
  exportFile?: (data: Record<string, any>[]) => void;
}

TableEditProps

表格编辑功能配置项类型，即在 columns 的 editProps 配置项类型。

import type { FormItemColumnProps } from "@/components/pro/form-item";

export interface TableEditProps extends FormItemColumnProps {
  /**
   * 表单组件的值
   */
  value?: any;
}

ButtonRowProps

表格操作按钮属性的类型。

import type { ButtonProps, IconProps, LinkProps } from "element-plus";

export type ButtonRowProps = Partial<ButtonProps & LinkProps & IconProps & Record<string, any>>;

ButtonEl

表格操作按钮属性的 el 配置项。

export type ButtonEl = "ElButton" | "el-button" | "ElIcon" | "el-icon" | "ElLink" | "el-link";

ConformEl

表格二次操作按钮组件的 el 配置项

export type ConformEl = "ElPopconfirm" | "ElMessageBox" | "el-popconfirm" | "el-messageBox";

ButtonsCallBackParams

点击按钮回调的参数的类型。

export interface ButtonsCallBackParams extends TableScope {
  /**
   * 点击按钮数据
   */
  buttonRaw: ButtonRaw;
  /**
   * 解析后的按钮数据中的 text
   */
  text: string;
  /**
   * 按钮点击事件数据
   */
  event: MouseEvent;
}

ButtonRaw

表格操作栏按钮配置项。

import type { Component, MaybeRef, MaybeRefOrGetter } from "vue";
import type { ElTooltipProps } from "element-plus";

export interface ButtonRaw {
  /**
   * 操作文本
   */
  text: MaybeRef<string> | ((row: TableRow, index: number, button: ButtonRowProps) => MaybeRef<string>);
  /**
   * 操作按钮唯一 code，可用来判断按钮类型
   */
  code?: string | number;
  /**
   * 操作按钮类型
   *
   * @default 'ElLink'
   */
  el?: MaybeRefOrGetter<ButtonEl>;
  /**
   * `@element-plus/icons-vue` 的图标名称，对 ElButton、ElLink、ElIcon 组件同时生效
   */
  icon?: Component;
  /**
   * ElButton、ElLink、ElIcon 组件对应的 props
   */
  elProps?: MaybeRef<ButtonRowProps> | ((row: TableRow, index: number, button: ButtonRaw) => ButtonRowProps);
  /**
   * ElTooltip 组件的 props， type 为 icon 时生效
   */
  tooltipProps?: Partial<ElTooltipProps>;
  /**
   * 按钮显示的逻辑 默认 true 显示，不需要显示给 false
   */
  show?: MaybeRef<boolean> | ((row: TableRow, index: number, button: ButtonRaw) => MaybeRef<boolean>);
  /**
   * 二次确认配置
   */
  confirm?: Props["confirm"];
  /**
   * 点击当前按钮时触发，可与PlusTable的事件 `clickAction` 同时触发； * 操作需要二次确认时：PlusTable的事件 `clickAction`会在确认时触发，而当前的onClick是在点击时触发
   */
  onClick?: (params: ButtonsCallBackParams) => void;
  /**
   * 操作需要二次确认时，点击确认时触发
   */
  onConfirm?: (params: ButtonsCallBackParams) => void;
  /**
   * 操作需要二次确认时，点击取消时触发， 可与PlusTable的事件 `clickActionConfirmCancel` 同时触发
   */
  onCancel?: (params: ButtonsCallBackParams) => void;
}

OperationProps

表格操作按钮 Props。

/**
 * 操作按钮独有 Props，会给 TableColumn 用
 */
export interface ExtraProp {
  /**
   * 操作按钮集合
   */
  buttons?: MaybeRefOrGetter<ButtonRaw[]>;
  /**
   * 操作按钮类型
   *
   * @default 'ElLink'
   */
  el?: MaybeRefOrGetter<ButtonEl>;
  /**
   * 显示出来的按钮个数
   *
   * @default 3
   */
  showNumber?: number | ((row: TableRow, index: number) => number);
  /**
   * 二次确认配置
   */
  confirm?:
    | boolean
    | Record<string, any>
    | Confirm<OperationConfirmEl.ElPopconfirm | `${OperationConfirmEl.ElPopconfirm}`>
    | Confirm<OperationConfirmEl.ElMessageBox | `${OperationConfirmEl.ElMessageBox}`>;
}

export type OperationProps = Omit<Partial<TableColumn>, "children" | "renderCell"> & ExtraProp;

/**
 * 二次确认组件配置项
 */
export type Confirm<T extends keyof ConfirmProps> = {
  /**
   * 组件名称
   *
   * @default ElMessageBox
   */
  el?: MaybeRefOrGetter<ConformEl>;
  /**
   * 组件 props 属性
   */
  props?: ConfirmProps[T];
};

export type ConfirmProps = {
  ElPopconfirm: Partial<PopconfirmProps>;
  ElMessageBox: {
    /**
     * ElMessageBox.confirm 的 title
     *
     * @default '提示'
     */
    title?: string | ((data: ButtonsCallBackParams) => string);
    /**
     * ElMessageBox.confirm 的 message
     *
     * @default '确定执行本次操作'
     */
    message?: string | ((data: ButtonsCallBackParams) => string);
    /**
     * ElMessageBox.confirm 的 options
     */
    options?: ElMessageBoxOptions;
    /**
     * ElMessageBox.confirm 的 appContext
     */
    appContext?: AppContext | null;
  };
};

表格二次确认组件 Props。

UseTableStateData

表格状态数据。

export interface UseTableStateData {
  /** 表格数据 */
  tableData: Record<string, any>[];
  /** 分页信息 */
  pageInfo: PageInfo;
  /** 查询参数 */
  searchParams: Record<string, any>;
  /** 初始化查询参数 */
  searchInitParams: Record<string, any>;
  /** 总参数 */
  totalParams: Record<string, any>;
}