组件文档

Appearance

Return to top
On this page

AdTable组件

通过配置JSON快速构建列表、分页、搜索、导出、自定义列、自定义排序等功能。

按钮权限控制

如何设置权限数据

标准的列表的数据结构

js
const res = {
  data: {
    records: [],
    total: 0,
  },
};

快捷列表配置

请求响应数据格式化

如果返回的数据不是标准的格式，可以通过respHandler进行格式化

请求的数据可以通过reqHandler进行格式化

headerAction按钮禁用控制

  • effect默认没有控制按钮
  • effect配置是one时，单个选中才能启用
  • effect配置是more时，只有有选择就启用

插槽的运用

插槽名就是prop字段对应的的key

AdTable Prop

属性名说明类型默认值属性
model-value / v-model绑定值Record<string, any>——
headerAction表头操作按钮Array<Action<T>>——
columnAction列操作按钮Array<Action<T>>——
columnActionLabel列操作按钮标签string——
columnActionWidth列操作按钮宽度number | string——
actionClick操作按钮点击回调
——
table表格配置Partial<TableProps<T>>—查看
events表格事件配置Partial<TableEmits<T>>—查看
columns列配置Array<Partial<Column<T>>>—查看
doubleClickPickOn双击行是否选中boolean——
handleTableHeaderClick表头点击回调
——
handleTableRowClick行点击回调
——
isAutoLoadable是否自动加载数据booleantrue—
api数据获取 API
——
exportExcelApi导出Excel数据 API
——
reqHandler请求参数处理器
——
respHandler响应数据处理器
——
toolbarSearchText搜索按钮文本string隐藏搜索—
toolbarSearchHiddenText隐藏搜索按钮文本string显示搜索—
toolbarDownloadText下载按钮文本string导出—
toolbarRefreshText刷新按钮文本string刷新—
toolbarColumnsText列显示/隐藏按钮文本string显隐列—
toolbarSortText排序按钮文本string排序—
toolbarDownloadPerm下载权限配置Array<string> | string——
isToolbarDownload是否显示下载按钮booleantrue—
isToolbarColumns是否显示列按钮booleantrue—
isToolbarSort是否显示排序按钮booleantrue—
isToolbar是否显示工具栏boolean——
isPaging是否启用分页booleantrue—
pageSize每页显示条目数number10—
pageSizes每页显示条目数选项Array<number>[10, 20, 30, 40, 50]—

Action Prop

属性名说明类型默认值
actionType操作类型string—
actionName操作名称string—
perm权限配置string | Array<string>—
icon图标string—
color颜色
primary
hidden是否隐藏(row: T) => boolean—
formatter格式化函数(row: T) => string—
effect操作按钮禁用
—

AdTable Exposes

名称描述类型
fetchData刷新列表AdTableInstance
list列表数据AdTableInstance

AdTable Slot

名称描述类型
default表单组件—
total汇总数据—

类型声明

显示类型声明
ts
import type { TableProps, TableColumnCtx } from 'element-plus';

export interface Action<T = any> {
  actionType: string;
  actionName: string;
  perm?: string | Array<string>;
  icon?: string;
  color?: 'primary' | 'success' | 'info' | 'warning' | 'danger';
  hidden?: (row: T) => boolean;
  formatter?: (row: T) => string;
  effect?: 'one' | 'more';
}

interface TableEmits<T = any> {
  select: (selection: T[], row: T) => void;
  selectAll: (selection: T[]) => void;
  selectionChange: (selection: T[]) => void;
  cellMouseEnter: (row: T, column: TableColumnCtx<T>, cell: any, event: Event) => void;
  cellMouseLeave: (row: T, column: TableColumnCtx<T>, cell: any, event: Event) => void;
  cellClick: (row: T, column: TableColumnCtx<T>, cell: any, event: Event) => void;
  cellDblclick: (row: T, column: TableColumnCtx<T>, cell: any, event: Event) => void;
  cellContextmenu: (row: T, column: TableColumnCtx<T>, cell: any, event: Event) => void;
  rowClick: (row: T, column: TableColumnCtx<T>, event: Event) => void;
  rowContextmenu: (row: T, column: TableColumnCtx<T>, event: Event) => void;
  rowDblclick: (row: T, column: TableColumnCtx<T>, event: Event) => void;
  headerClick: (column: TableColumnCtx<T>, event: Event) => void;
  headerContextmenu: (column: TableColumnCtx<T>, event: Event) => void;
  sortChange: (sortData: { column: TableColumnCtx<T>; prop: string; order: string }) => void;
  filterChange: (filterData: { filters: any[]; columnKey: string }) => void;
  currentChange: (currentrow: T, oldCurrentrow: T) => void;
  headerDragend: (dragData: { newWidth: number; oldWidth: number; column: any; event: Event }) => void;
  expandChange: (row: T, expandedRows: any[] | boolean) => void;
}

export type Column<T = any> = TableColumnCtx<T> & { hidden: boolean, tag:boolean };

export interface AdTablePorps<M = any, T = any> {
  modelValue?: Record<string, any>;
  headerAction?: Array<Action<T>>;
  columnAction?: Array<Action<T>>;
  columnActionLabel?: string;
  columnActionWidth?: number | string;
  actionClick?: (action: Action<T>, rows: Array<T>) => void;
  table?: Partial<TableProps<T>>;
  events?: Partial<TableEmits<T>>;
  columns?: Array<Partial<Column<T>>>;
  doubleClickPickOn?: boolean;
  handleTableHeaderClick?: (key: string, column: Partial<Column<T>>) => void;
  handleTableRowClick?: (key: string, row: T, rowIndex: number) => void;
  isAutoLoadable?: boolean;
  api: (queryForm?: Record<string, any>) => Promise<any>;
  exportExcelApi?: (queryForm?: Record<string, any>) => void;
  reqHandler?: (queryForm?: M) => M;
  respHandler?: (data?: Record<string, any>) => Record<string, any>;
  toolbarSearchText?: string;
  toolbarSearchHiddenText?: string;
  toolbarDownloadText?: string;
  toolbarRefreshText?: string;
  toolbarColumnsText?: string;
  toolbarSortText?: string;
  toolbarDownloadPerm?: Array<string> | string;
  isToolbarDownload?: boolean;
  isToolbarColumns?: boolean;
  isToolbarSort?: boolean;
  isToolbar?: boolean;
  isPaging?: boolean;
  pageSize?: number;
  pageSizes?: Array<number>;
}

export interface AdTableEmits {}

export interface AdTableInstance {
  fetchData: (params?: { isResetPageNumber: boolean }) => Promise<void>;
	list: Array<any>;
}