> 更多案例请参考：[https://weapp.eteams.cn/build/techdoc/wdoc/index.html#/online/913446815610363905/doc/934993601420591104](https://weapp.eteams.cn/build/techdoc/wdoc/index.html#/online/913446815610363905/doc/934993601420591104)

# 基础理解：

#### 组件id：

[图片附件未整合: ../../../../_assets/370052578848800768/001-dd6fe28f6b.png]

### 当前已定义的插件

```
export interface IListPlugin {
  /** ---------- 内置属性/方法 ---------- */

  /** List组件实例 */
  list?: {
    forceUpdate: () => void;
    readonly props: InternalHocListProps;
    listType: string;
  };

  /** List组件store */
  pluginCenter?: PluginCenterType;

  /** ---------- 插件支持的属性/方法 ----------  */

  /** 插件名称，唯一标志，如：AutoScroll */
  name: string;

  /** 插件的选项，支持外部进行二次扩展等操作, list和store为plugincenter层传入，便于插件在constructor中做初始化操作 */
  opts?: IPluginOpts<Record<string, any>>;

  /** 插件是否启用 */
  readonly isEnabled?: boolean;

  /** 插件使用环境，运行默认不判断 */
  readonly mode?: IPluginModeType[];

  /** 禁止在特殊插件下的列表内启用，例如分组列表下 */
  readonly disabledRefPlugins?: String[];

  /** 允许在特殊插件下的列表内启用，例如批量弹窗列表下 */
  readonly enabledRefPlugins?: String[];

  /** 插件销毁，会在List组件unmount或者插件禁用后调用 */
  destory?: () => void;

  /**
   * -------------------------------------------------------------------
   * 仅适用于List Design的定义
   * 针对列表Design开的口子，冗余在IListPlugin的类型声明中 不单独再定义类型
   * -------------------------------------------------------------------
   */

  /** 在设计视图处理属性变更后的回调 */
  handlePropChange?(key: keyof BaseConfigDataType, value: any): void;

  /** 在设计视图处理配置变更后的回调（在配置视图通过onConfigChange调用的情况） */
  handleConfigChange?(changes: Partial<BaseConfigDataType>): void;

  /** --------------------------------------- List组件回调 --------------------------------------- */

  /** 自定义ui列表props的方法 */
  getListProps?(props: Partial<ListProps>): Partial<ListProps>[];

  /** 自定义列表式的单多选属性的方法 */
  getListSelection?(props: Partial<ITableSelection>): Partial<any>[];

  /** 自定义ui表格props的方法 */
  getTableProps?(props: Partial<ITableProps>): Partial<ITableProps>[];

  /** 自定义ui表格selection的方法 */
  getTableSelection?(props: Partial<ITableSelection>): Partial<ITableSelection>[];

  /** 自定义ui表格props的方法 */
  getPaginationProps?(
    props: Partial<ITableProps['pageInfo'] | ListProps['paginationProps']>,
  ): Partial<ITableProps['pageInfo'] | ListProps['paginationProps']>[];

  /** 运行动态更新table columns */
  getTableViewColumns?(tableField: TableField[]): TableField[][];

  /** 自定义元素特殊样式的方法 */
  getListCellStyle?(cellStyle: IListCellStyle, opt?: IListCellStyleOpts): IListCellStyle[];

  /** 自定义元素渲染的方法 */
  getListCellContent?(
    cellValue: ReactElement,
    opt?: IListCellContentOpts,
  ): (ReactElement | IListCellContentOpts)[];

  /** 自定义预览时,表格式显示转换的渲染规则 */
  getPreviewTableTransKey?(key: string): string[];
  /** 表格式自定义列字段方法 */
  getTableColFields?(colFields: any[], colMergeFields: any[]): any[][];

  /** 表格式自定义列方法 */
  getTableColumns?(
    columns: ITableColumn[],
    opts: { tableHeadWidth: number; tableField: TableField[] },
  ): ITableColumn[][];

  /** 设置是否默认清除表格选中项的方法 */
  getCanClearSelectDatas?(canClear: boolean): boolean[];

  /** List组件mount前的回调，此时store和插件已经初始化完成，可用于外部插件更新一些插件的opts */
  onBeforeMount?(store: BaseListStore): void;

  /** List组件didmount的回调 */
  onDidMount?(listDom: HTMLElement, store: BaseListStore): void;

  /** List组件didupdate的回调 */
  onDidUpdate?(preProps: InternalHocListProps, props: InternalHocListProps): void;

  /** 列表内容自定义渲染，包含renderAddonBefore和renderAddonAfter */
  renderContent?(hook: RenderHookType): RenderHookType;

  /** 表格内容自定义渲染，不包含renderAddonBefore和renderAddonAfter */
  renderTableContent?(hook: RenderHookType): RenderHookType;

  /** 列表内容自定义渲染，不包含renderAddonBefore和renderAddonAfter */
  renderListContent?(hook: RenderHookType): RenderHookType;

  /** 在列表之前的自定义渲染 */
  renderAddonBefore?(hook: RenderHookType): (datas: any[]) => ReactElement | undefined;

  /** 在列表底部的自定义渲染 */
  renderAddonBottom?(hook: RenderHookType): (datas: any[]) => ReactElement | undefined;

  /** 在列表内容之后的自定义渲染，当内容数据为空时不会渲染 */
  renderAddonAfter?(hook: RenderHookType): RenderHookType;

  /** 在列表之上的自定义渲染 */
  renderAddonHeader?(hook: RenderHookType): RenderHookType;

  /** List组件渲染的回调，用于重写组件的render */
  render?(hook: RenderHookType): RenderHookType;

  /** List标题自定义渲染 */
  renderTitle?(hook: RenderHookType): (title: any, config: any) => ReactElement | undefined | null;

  /** List标题右侧计数展示的自定义渲染 */
  renderTitleCount?(
    hook: RenderHookType,
  ): (options: RenderTitleCountOpts) => ReactElement | undefined | null;

  /** List单元格自定义渲染 */
  renderCell?(hook: RenderHookType): RenderHookType;

  /** List行前的自定义渲染 */
  renderRowAddonBefore?(hook: RenderHookType): (
    colIndex: number,
    options: {
      data: ListData;
      isMainLayout?: boolean;
      layoutIndex?: number;
      isExtendList?: boolean;
    },
  ) => ReactElement | undefined;

  /** 列表式-行自定义渲染自定义渲染 */
  renderRow?(hook: RenderHookType): (rowItem: any[]) => ReactElement | null;

  /** 列表式-列表每行数据下方的自定义渲染 */
  renderGridAddonAfter?(
    hook: RenderHookType,
  ): (index: number, data: ListData) => ReactElement | null;

  /** 列表式-layout自定义渲染 */
  renderLayout?(hook: RenderHookType): (
    rowData: ListData,
    options: {
      className?: string;
    },
    rowIndex: number,
  ) => ReactElement | null;

  /** 列表式-layout左侧自定义渲染 */
  renderLayoutAddonBefore?(hook: RenderHookType): (rowData: ListData) => ReactElement | null;

  /** 列表式-layout右侧自定义渲染 */
  renderLayoutAddonAfter?(hook: RenderHookType): (rowData: ListData) => ReactElement | null;

  /** 列表式-listItem自定义渲染 */
  renderListItem?(
    hook: RenderHookType,
  ): (rowData: ListData, index: number, opts?: any) => ReactElement | null;

  /** 标题右侧区域自定义渲染 */
  renderHeaderRight?(hook: RenderHookType): (config: any) => ReactElement | null;

  /** 标题左侧区域自定义渲染 */
  renderHeaderLeft?(hook: RenderHookType): (config: any) => ReactElement | null;

  /** --------------------------------------- List组件方法回调 --------------------------------------- */

  /** 单击每一条数据事件动作的方法 */
  getExcuEventActions?(
    data: any,
    index: number,
    e: React.MouseEvent,
    opts: ExcuEventActionsOptsType,
  ): any[];

  /** 轮播图是否显示标题 */
  getShowCarouselImgTitle?(isShow: boolean): boolean[];

  /** View视图抛出上下文的方法 */
  getViewMount?(context: Record<string, any>): Record<string, any>[];

  /** 基础列表getData参数 */
  getDataParams?(params: Record<string, any>): Record<string, any>[];

  /** 基础列表getCount参数 */
  getCountParams?(
    countParams: Record<string, any>,
    dataParams: Record<string, any>,
  ): Record<string, any>[];

  /** 基础列表getFields接口 */
  getDataFields?(func: (...args: any[]) => Promise<any[]>): ((...args: any[]) => Promise<any[]>)[];

  /** 基础列表getData数据 */
  getNetData?(data: any): any[];

  /** 基础列表data数据 */
  getListDatas?(
    listData: any[],
    fieldsData: any[],
    opts: { dynamicFields: any[] },
    ...args: any[]
  ): any[];

  /** --------------------------------------- 插件的方法回调 --------------------------------------- */
  /** 内容顶部左侧的渲染 */
  renderContentHeaderBefore?(hook: RenderHookType): (config: any) => ReactElement | null;
  /** 内容顶部右侧的渲染 */
  renderContentHeaderAfter?(hook: RenderHookType): (config: any) => ReactElement | null;
  /** 当页码改变后的回调，参数分别为改变后的页码和每页条数 */
  onPageNoChange?(value: number, pageSize: number): void;
  /** 内容顶部的渲染条件 */
  getEnableContentHeader?(enabled: boolean): boolean[];
  /** 内容顶部区域的渲染条件 */
  getEnableContentHeaderCell?(enabled: boolean): boolean[];
  /** 内容顶部区域的渲染否决条件 */
  getRejectRenderHeader?(rejected: boolean): boolean[];
  /** 内容顶部按钮区域的渲染条件 */
  getEnableHeaderButton?(enabled: boolean): boolean[];
  /** 渲染在快捷按钮之后 */
  renderQuickBtnsAfter?(hook: RenderHookType): (config: any) => ReactElement | null;
  /** 是否渲染更多按钮 */
  getShowMoreBtns?(status: boolean): boolean[];
  /** 渲染在更多按钮之后 */
  renderMoreBtnsAfter?(hook: RenderHookType): (config: any) => ReactElement | null;
  /** 展开至顶部按钮内部组件的渲染 */
  renderShrinkContent?(hook: RenderHookType): RenderHookType;
  /** 单击每一条数据事件动作时的自定义链接参数 */
  getCustomLinkOpts?(opts: Record<string, any>): Record<string, any>[];
  /** 是否开启表格式表头排序功能 */
  getSortIconRender?(enabled: boolean): boolean[];
  /** 展开收缩内的内容互斥展示方式 */
  getShowContentTop?(enabled: boolean): boolean[];
  /** 是否渲染到选项卡右上角 */
  getRenderTabRight?(enabled: boolean): boolean[];
  /** 是否允许禁止请求count接口 */
  getForbidCount?(enabled: boolean): boolean[];
  /** 数据选中回调 */
  onDataChecked?(datas: any[], checkedKeys: string[]): void;
  /** 获取check插件实例 */
  getCheckedInstance?(): Record<string, any>;
  /** 列表式时启用分组title的折叠展开功能 */
  getEnableGroupCollapse?(status: boolean): boolean[];
  /** 列表数据量是否需要给导出excel做限制 */
  getEnableExportListLimit?(enable: boolean): boolean[];
  /** 分组标题自定义渲染 */
  renderGroupTitle?(hook: RenderHookType): (opts: any) => ReactElement | null;
  /** 分组标题自定义渲染 */
  renderGroupTitleRight?(hook: RenderHookType): (opts: any) => ReactElement | null;
  /** 批量列表顶部自定义渲染  */
  renderCustomBatchHeader?(hook: RenderHookType): (config: any) => ReactElement | null;
  /** 是否需要记录分页条数 */
  getRecordPageSize?(enabled: boolean): boolean[];
  /** 是否启用展开收缩插件 */
  getEnableRenderShrinkPlugin?(enabled: boolean): boolean[];
  /** 是否启用展开收缩插件 */
  getEnableRenderShrinkSpreadTop?(enabled: boolean): boolean[];
  /** 获取自定义按钮点击配置 */
  getCustomBtnExecConfig?(btns: ButtonConfigType[]): ButtonConfigType[][];
  /** 获取按钮权限接口额外参数 */
  getButtonPermissionParams?(params: AnyObj): AnyObj[];
  /** 获取按钮权限接口参数 */
  getButtonPermissionAllParams?(params: AnyObj[]): AnyObj[][];
  /** 获取按钮直接过滤的接口参数 */
  getFilterDataOnListParams?(params: AnyObj[], opts: AnyObj): AnyObj[][];
  /** 是否启用行上按钮插件 */
  getRowLineButtonEnabled?(enabled: boolean): boolean[];
  /** 按钮右上角区域自定义权限接口【限定一次，不允许传递】 */
  getRightButtonsPermission?(
    func: (...args: any[]) => Promise<ButtonPermissionDataType[]>,
  ): ((...args: any[]) => Promise<ButtonPermissionDataType[]>)[];
  /** 按钮自定义权限接口【限定一次，不允许传递】 */
  getRowButtonsPermission?(
    func: (...args: any[]) => Promise<ButtonPermissionDataType[]>,
  ): ((...args: any[]) => Promise<ButtonPermissionDataType[]>)[];
  /** 获取按钮额外配置信息【限定一次，不允许传递】 */
  getExtendBtns?(
    func: (...args: any[]) => Promise<ButtonPermissionDataType[]>,
  ): ((...args: any[]) => Promise<ButtonPermissionDataType[]>)[];
  /** 获取行上按钮/行末按钮 */
  getRowButtonDatas?(btns: ButtonRenderType[], rowData: any): ButtonRenderType[][];
  /** 获取右上角区域按钮 */
  getRightButtonDatas?(btns: ButtonRenderType[]): ButtonRenderType[][];
  /** 获取左上角自定义分类搜索 */
  getLeftSearchGroupDatas?(datas: any[]): any[][];
  /** 获取个性化弹窗左侧menu数据 */
  getPersonalMenuData?(menudata: MenuItemData[]): MenuItemData[][];
  /** 自定义渲染个性化弹窗左侧区域 */
  renderPersonalLeftArea?(hook: RenderHookType): (opt: any) => ReactElement | null;
  /** 自定义渲染个性化弹窗右侧区域 */
  renderPersonalRightArea?(hook: RenderHookType): (opt: any) => ReactElement | null;
  /** 表格式表头排序回调 */
  onTableSort?(columns: ITableColumn[], sortColumn: ITableColumn): void;
  /** 批量弹窗勾选数据回调 */
  onBatchSelectedCb?(selectedkeys: string[], selectedRows: any[], changeRow: any, type: any): void;
  /** 导出弹窗内容区域渲染 */
  getExportContentOptions?(opts: ExportContentOptionsType[]): ExportContentOptionsType[][];
  /** 是否需要固定宽带渲染导出弹窗字段 默认false */
  getExportFieldFixedWidth?(enabled: boolean): boolean[];
  /** 导出excel图片内容 */
  getExportImgInExcelContent?(): () => ReactElement | null;
  /** 导出数据设置自定义Item渲染 */
  renderCustomExportDataItem?(hook: RenderHookType): (item: any) => ReactElement | null;
  /** 导出行右侧额外自定义渲染 */
  renderExportExtraRender?(hook: RenderHookType): (item: any) => ReactElement | null;
  /** 导出模板弹窗渲染 */
  renderExportTemplateRender?(hook: RenderHookType): (item: any) => ReactElement | null;
  /** 批量弹窗确认回调 */
  getSubmitBatchDialog?(
    execType: number,
    checkedKeys: string[],
    checkedDatas: any[],
    opts: any,
  ): number[];
  /** 列表statisticsResult统计列数据 */
  getStatisticsResult?(result: AnyObj): AnyObj[];
  /** 获取批量弹窗列表配置项 */
  getBatchListConfig?(config: any): any[];
  /** 获取批量弹窗列表getData参数 */
  getBatchListDataParams?(params: Record<string, any>, opts: any): Record<string, any>[];
  /** 获取批量弹窗列表参数 */
  getBatchListDataOpts?(opts: Record<string, any>): Record<string, any>[];
  /** 打开导出弹窗 */
  onShowExportDlg?(opts?: AnyObj): void;
  /** 导出数据前钩子 */
  getExportDataBefore?(
    func: (...args: any[]) => Promise<number>,
  ): ((...args: any[]) => Promise<number>)[];
  /** 导出功能接口自定义【限定一次，不允许传递】 */
  getExportPromiseData?(
    func: (...args: any[]) => Promise<ExportDataResType>,
  ): ((...args: any[]) => Promise<ExportDataResType>)[];
  /** 启用上下级 */
  getEnableSuperiorExpand?(enabled: boolean): boolean[];
  /** 启用列表分组 */
  getEnableListGroup?(enabled: boolean): boolean[];
  /** 启用表格式合并明细数据插件 */
  getEnableTableSubData?(enabled: boolean): boolean[];
  /** 获取导出弹窗顶部的按钮 */
  getExportDlgTopBtn?(data?: IExportDlgBtn[]): IExportDlgBtn[][];
  /** 获取导出excel字段类型选项 */
  getExportExcelFieldOpts?(opts: any[]): any[][];
  /** 获取导出数据设置选项 */
  getExportExcelSettingOpts?(opts: any[]): any[][];
  /** 获取分组导出字段选项 */
  getExportExcelGroupFields?(opts: any[]): any[][];
  /** 获取导出设置弹窗内的配置信息 */
  getExportSettingConfig?(data: any): any[];
  /** 获取导出excel字段类型选项 */
  getExportAllFieldsAndOpts?(data: AnyObj, otherParams?: AnyObj): AnyObj[];
  /** 获取过滤导出分组字段类型的函数 */
  getExportGroupFieldFilter?(filter: any): any[];
  /** 获取导出数据设置弹窗底部按钮 */
  getExportSettingDlgFooterBtn?(btn: any, config: any): any[];
  /** 获取导出的自定义字段 */
  getExportCusFieldsData?(data: any): any[];
  /** 获取执行事件动作时的参数配置 */
  getExcuEventActionsParams?(data: AnyObj): AnyObj[];
  /** 启用合并标题内容后，列表内容区域添加wrap层 */
  getEnableMergeContentWrap?(enabled: boolean): boolean[];
  /** 是否启用合并标题渲染 */
  getEnableMergeHeader?(enabled: boolean, config: any): boolean[];
  /** 是否启用合并标题到内容区域渲染 */
  getEnableMergeHeaderToContent?(enabled: string[], config: any): any[];
  /** 是否启用列表式数据上方自定义渲染 */
  getEnableListItemHeader?(enabled: boolean): boolean[];
  /** 是否渲染表格表头 */
  getUpdateTableColumns?(enabled: boolean, config?: any): boolean[];
  /** 触发事件动作前 */
  onBeforeExcuEventActions?(eventGroup: any, params: any): void;
  /** 触发事件动作前事件是否通过校验 */
  getEnableDataFilterVerify?(config: any): any;
  /** 是否启用表格式统计插件 */
  getEnableTableStatistics?(enabled: boolean): boolean[];
  /** 是否启用扩展区域插件 */
  getEnableRenderExtendArea?(enabled: boolean): boolean[];
  /** 获取搜索条件是否需要明细字段 */
  getSearchConditionNeedDetail?(needDetail: boolean): boolean[];
  /** 切换数据源 */
  onResetDataset?(dataset: DataSourceValueType): void;
  /** 更新显示字段渲染 */
  onChangeDisplayFields?(opts: any): void;
  /** 是否需要缓存右上角按钮权限 */
  getRightButtonsMemo?(enabled: boolean): boolean[];
  /** 获取个性化设置弹窗内自定义字段过滤函数 */
  getPersonalFieldsFilter?(func: Function): Function[];
  /** 是否启用扩展区域无数据隐藏 */
  getEnableExtendAreaNoDataHide?(enabled: boolean): boolean[];
  /** 是否允许筛选过滤列表 */
  getEnableFilterList?(enabled: boolean): boolean[];
  /** 获取是否开启了父子级联动勾选 */
  getLinkageBySelect?(enabled: boolean): boolean[];
  /** 获取业务列表getData接口url类型 */
  getFetchUrlType?(): string[];
  /** 获取业务列表getData接口service类型 */
  getFetchUrlService?(): string[];
  /** 是否启用标题 */
  getEnableTitle?(enabled: boolean, config: any): boolean[];
  /** 展开/收起分组key回调 */
  onExpandGroupKeys?(keys: string[], key: string): void;
  /** 数据建模列表-人力资源、部门、分部相关字段高亮显示样式 */
  getLinkStyleEnabled?(): boolean[];
  /** 分组分页触发回调 */
  onGroupPageChange?(pageNo: number, pageSize: number, opts: any): void;
  /** 获取搜索组件自定义支持条件关系 */
  getCustomConditionType?(func: Function): Function[];
  /** 获取搜索组件缓存key */
  getSearchSettingMemoKey?(key: string): string[];
  /** 获取请求搜索布局的额外参数 */
  getTableConditionParams?(res: AnyObj, fields: Field[]): AnyObj;
  /** 获取请求搜索默认值的额外参数 */
  getFilterDefaultValueParams?(res: AnyObj, fields: Field[]): AnyObj;
  /** 获取请求搜索默认值 */
  getFilterDefaultValue?(res: AnyObj): AnyObj;
  /** 获取设计器请求搜索默认值 */
  getDesignFilterDefaultValue?(res: AnyObj): AnyObj;
  /** 获取按钮事件动作 */
  getBtnEventActions?(btnActions: any[], params: any): any[];
  /** 按钮权限接口数据后置处理 */
  getButtonPermissionAfter?(
    func: (...args: any[]) => Promise<ButtonPermissionDataType[]>,
  ): ((...args: any[]) => Promise<ButtonPermissionDataType[]>)[];
  /** 获取搜索条件的字段信息 */
  getCustomFields?(func?: Function): any[];
  /** 获取TopComs右边区域自定义渲染 */
  getRenderContentHeaderAfter?(func?: Function): Function[] | undefined;
  /** 可编辑表格触发保存回调 */
  onSaveTableDatas?(datas: any, callback: Function, data: any[]): void;
  /** 可编辑表格删除行数据触发的回调 */
  onDeleteTableDatas?(deleteKeys: string[], callback: Function, dataKeys: string[]): void;
  /** 可编辑表格删除行数据后的回调 */
  onDeleteTableDatasAfter?(
    dataKeys: string[],
    deleteKeys: string[],
    failedKeys: string[],
    ...args: any[]
  ): void;
  /** 可编辑表格配置更新回调 */
  onUpdateTableConfig?(config: BaseConfigDataType): void;
  /** 可编辑表格数据更新回调 */
  onUpdateTableDatas?(...args: any[]): void;
  /** 可编辑表格新增/编辑的回调  */
  getSyncUpdateTableColumn?(func: Function, changes: any, editCol?: any): (() => Promise<Field>)[];
  /** 列宽拖拽是否更新缓存 */
  getUpdateColumnWidthToCache?(isToCache: boolean, tableField: TableField[]): boolean[];
  /** 可编辑表格打开详情 */
  onOpenDetail?(rowData: any): void;
  /** 是否启用搜索相关插件：RenderSearchCommon、RenderSearchGroup、RenderSearchQuick */
  getEnableSearchPlugin?(enabled: boolean): boolean[];
  /** 是否启用常用搜索插件：RenderSearchCommon */
  getEnableSearchCommonPlugin?(enabled: boolean): boolean[];
  /** 是否启用分类搜索插件：RenderSearchGroup */
  getEnableSearchGroupPlugin?(enabled: boolean): boolean[];
  /** 是否启用快捷搜索插件：RenderSearchQuick */
  getEnableSearchQuickPlugin?(enabled: boolean): boolean[];
  /** 获取搜索相关配置 */
  getSearchConditions?(searchConditions: any): any[];
  /** 可编辑表格单元格背景修改时的回调 */
  onTableCellBackgroundChange?(data: any[]): void;
  /** 可编辑表格编辑/只读模式切换时的回调 */
  onTableEditModeChange?(isReadonly: boolean): void;
  /** 可编辑表格编辑/只读模式切换时的回调 */
  onTableReadonlyChange?(readonly: boolean | ReadonlyConfig): void;
  /** 可编辑表格新增行前的回调 */
  getTableRowAddBefore?(): (() => Promise<any>)[];
  /** 是否自定义启用列表的check框 */
  getEnableSelection?(enabled: boolean): boolean[];
  /** 是否自定义启用表格式自定义序号插件 */
  getEnableTableCustomIndex?(enabled: boolean): boolean[];
  /** 是否需要走field接口 */
  getFieldAjax?(enabled: boolean): boolean[];
  /** 是否需要极简列表式的card-wrap层 */
  getUseCardWrapDom?(enabled: boolean): boolean[];
  /** 获取个性化设置弹窗内字段自定义显示函数 */
  getPersonalListColumnsFilter?(func: Function): Function[];
  /** 普通筛选是否初始化时调用默认值接口 */
  getInitFilterDefaultValue?(enabled: boolean): boolean[];
  /** 自定义check框禁用函数 */
  getSelectionDisabled?(disabled: boolean, opts: any): boolean[];
  /** 自定义复写check框内容 */
  renderSelectionContent?(hook: RenderHookType): (rowData: any) => ReactElement | null;
  /** 分类搜索接口参数 */
  getGroupDataParams?(
    params: Record<string, any>,
    opts: { sourceType: 'group_data' | 'group_count' },
  ): Record<string, any>[];
  /** 获取搜索相关配置状态 */
  getSearchSettings?(settings: any, config?: any): any[];
  /** 在表头标题之前的自定义渲染 */
  renderAddonThBefore?(hook: RenderHookType): RenderHookType;
  /** 获取自定义定时时间 单位秒 */
  getCustomTimeRefresh?(time: number): number[];
  /** 常用搜索组件是否初次获取全部字段 */
  getCommonFilterHasAllFields?: (func: Function) => Function[];
  /** 获取高级搜索初始化表单 */
  getAdvancedSearchForm?: (adParams: any, adFormDatas: any) => any[];
  /** 获取初始化高级搜索store参数 */
  getInitAdSearchStoreParams?: (params: any) => any[];
  /** 页面卸载 */
  destoryPage?(): void;
  /** 获取表格rowKey */
  getTableRowKey?(rowKey: string): string[];
  /** 高级搜索触发前 */
  onAdSearch?(filters: any[]): void;
  /** 获取扩展区域其他数据列表情况的插件 */
  getExtendOtherListPlugin?(plugins: any[]): any[];
  /** 高级搜索字段修改值时触发的钩子 */
  onHandleChangeAdvanceField?(val: any, opts: any): void;
  /** 筛选自定义复写filterProps钩子 */
  getCustomFilterProps?(filterProps: AnyObj): AnyObj[];
  /** 高级搜索复写customHide钩子 */
  getAdSearchCustomHideCol?(col: FormLayoutProps, otherParams: AnyObj): any[];
  /** 批量弹窗标题自定义渲染 */
  renderCustomBatchDlgTitle?(hook: RenderHookType): RenderHookType;
  /** 表头启用/取消分组 */
  onHeaderChangeGroupField?(column: any, menu: MenuItemData): void;
  /** 表头新增整列填色 */
  onHeaderFillColor?(column: any, menu: MenuItemData): void;
  /** 是否渲染列注释 */
  getEnableRenderThRemark?(enabled: boolean): boolean[];
  /** 批量弹窗列表行点击事件 */
  onBatchListRowClick?(params: any): void;
  /** 批量列表插件中心 */
  initBatchPlugin?(plugin: PluginCenterType): void;
  /** 自定义多维表格模式顶部按钮 */
  getExcelTableHeaderOperations?: (loaders: Loaders[]) => Loaders[][];
  /** 自定义渲染多维表格模式顶部按钮弹窗内容 */
  renderTableHeaderOperationTriggerContent?(hook: RenderHookType, opts: any[]): RenderHookType;
  /** 业务列表重写右上角按钮多语言 */
  getButtonsMoreLabel?(topButtons?: any): any[];
  /** 自定义表格单元格可编辑状态 */
  getExcelTableCellEditStatus?: (val: boolean, opts: ITableCellOpts) => boolean[];
  /** 是否启用视图切换 */
  getEnableSwitchView?(enabled: boolean): boolean[];
  /** 按钮直接过滤在列表上，新增右上角自定义按钮 */
  getBatchListTopBtnsWithSelfList?(batchListBtns: any, opts: AnyObj): any[];
  /** 是否启用快速排序 */
  getEnableQuickSort?(enabled: boolean): boolean[];
  /** 更改列表分页模式回调 */
  onChangePageMode?(pageMode: PageModeType): void;
  /** 可编辑表格自定义右键菜单 */
  getContextMenuData?(menuData: AnyObj): AnyObj[];
  /** 可编辑表格点击右键菜单 */
  onContextMenuClick?(menuId: string, opts: any): void;
  /** 获取行末下拉按钮权限触发类型 0 数据加载完成 1 鼠标移入 */
  getRowDropButtonPermissionType?(type: string): string[];
  /** 临时开钩子让建模列表虚拟表数据源渲染时略过字段矫正 */
  getSListCardLayoutSkipCorrect?(isSkip: boolean): boolean[];
}
```

## 1、外部刷新列表sdk实现自定义排序

```
ebuilderSDK.getPageSDK().refresh('ccc0171539dd4102b624d3b4bcf7c4b7',{customOrder:JSON.stringify([{"id":"1116462055590887427","name":"field_1116462055590887427","orderType":"ASC"}])})
```

## 2、分类搜索平铺控制某个按钮显示隐藏

> 写在页面代码块中，针对单个数据页面

```
 import { eventEmitter,regOvProps } from '@weapp/utils';
  const comId = 'ec0bd4ba5e7d4611aba508d7a4e54b9c';//列表组件id

 class ExtraPlugin {
   name = 'ExtraPluginForControlTopBtn' // 插件唯一键，必须

    pluginCenter;

    tabId="-99";//随便一个不存在的选项id

    btnId = "1173636827886903296"; //需要控制隐藏的按钮id

    optionId = "2";//分类选项需要显示的选项id

    onDidMount = () => {
        this.regOvPropsMenu()
    }

    regOvPropsMenu =()=>{
      /***
       * 拦截ui的menu控制onchange
       */
      regOvProps(
        'weappUi',
        'Menu',
        (props) => {
          if (props.weId.indexOf(comId)>-1 && props.className==="ebcoms-nlist-search-group-top") {
            return {...props,onChange:(id)=>{
              props.onChange(id);
              this.tabId = id;
              this.pluginCenter.emit('btn.updateRightData')
            }}
          }
          return props;
        },
        0,
      );
    }
 
 
   getRightButtonDatas = (btns) => {
    let newBtns = btns.filter(btn => !!btn.id)
    if(this.tabId ==="-99" || this.tabId !== this.optionId){
      newBtns = newBtns.filter(btn =>  btn.id !== this.btnId)
    }
    return [newBtns]
  }
 }
 
 eventEmitter.once("@weapp/designer", `onBeforeMount_${comId}`, (plugin) => {
   plugin.registerPlugin(ExtraPlugin)
 });
```

## 3、隐藏数据列表右上角更多按钮

> 写在ecode中复写props

```
import { eventEmitter } from '@weapp/utils';

class ExtraButtonPlugin {
  name = 'ExtraButtonPlugin'

 pluginCenter;

  getShowMoreBtns=()=>{
      const {  page } = this.list.props || {};
      /**
       * 需要隐藏的数据列表id
       */
      const isShow = !["1174652050718687251"].includes(page.id);
      return [isShow]
  }

}

eventEmitter.on('@weapp/designer', 'plugin_center.ready.NList', ({ registerPlugin }) => {
  registerPlugin(ExtraButtonPlugin); // 可以传入组件实例
});
```

## 4、数据列表屏蔽getcount请求

> 对应页面代码块中写

```
import { eventEmitter } from '@weapp/utils';
//组件id -- 需要修改自己的组件id
 const comId = 'ab56187e89f14b40bce4eccf6cbc8269'
 class ExtraPlugin {
   name = 'ExtraPlugin' // 插件唯一键，必须
 
   onBeforeMount = () => {
    const DataPlugin = this.pluginCenter.use('Data');
    DataPlugin.setState({ opts: {
      ...DataPlugin.opts,
      fetchCount: () => Promise.resolve(10000000),
    } ,
     isVirtualCount:true
});
  };

  onDidMount() {
    this.pluginCenter.on('Data.totalload', this.onDataLoad);
  }

  destory() {
    this.pluginCenter.off('Data.totalload', this.onDataLoad);
  }

  onDataLoad = () => {
    const listProps = this.list.props;
    const { config } = listProps || {};
    const { pageMode } = config;
    if (pageMode === 'part' || pageMode === 'none') return;
    const dataPlugin = this.pluginCenter.use('Data');
    const { pageSize, netData } = dataPlugin;
    const hasMore = pageSize <= netData?.list.length
    this.list.updateHasMore(hasMore);
  };
 }
 
 eventEmitter.once("@weapp/designer", `onBeforeMount_${comId}`, (plugin) => {
   plugin.registerPlugin(ExtraPlugin)
 });
```

## 5、数据列表分页改变后的回调

```javascript
import { eventEmitter } from '@weapp/utils';
//组件id -- 需要修改自己的组件id
 const comId = 'ab56187e89f14b40bce4eccf6cbc8269'
 class PageChangeExtraPlugin {
   name = 'PageChangeExtraPlugin' // 插件唯一键，必须

  onPageNoChange = (value: number, pageSize: number) => {
    console.log(value,pageSize)
  };
 }
 
 eventEmitter.once("@weapp/designer", `onBeforeMount_${comId}`, (plugin) => {
   plugin.registerPlugin(PageChangeExtraPlugin)
 });
```

## 6、数据列表自定义右上角按钮显隐

> 异步处理，写在页面代码块

```
 import { eventEmitter,regOvProps } from '@weapp/utils';
  const comId = 'ec0bd4ba5e7d4611aba508d7a4e54b9c';//列表组件id

 class ExtraPlugin {
   name = 'ExtraPluginForControlTopBtn' // 插件唯一键，必须

    pluginCenter;

    onDidMount = () => {

    }

 /** 按钮权限接口数据后置处理 */
    getButtonPermissionAfter=()=>{
        const func = (btns) => this.getNewRightButtonDatas(btns) as Promise<any>;
       return [func];
   }

  getNewRightButtonDatas = (btns) => {
    return ajax().((res: any) => {
      return btns;
    });
  };

 }
 eventEmitter.once("@weapp/designer", `onBeforeMount_${comId}`, (plugin) => {
   plugin.registerPlugin(ExtraPlugin)
 });
```

## 7、获取数据列表内部的搜索条件

> 页面ecode注册钩子+按钮调用配合

```
 import { eventEmitter } from '@weapp/utils';
  const comId = 'b11ea9b6fd4e4d15ac0c23a385f241c4';//列表组件id

 class ExtraPlugin {
   name = 'ExtraPluginForListFilter' // 插件唯一键，必须

    pluginCenter;

      onDidMount = () => {

    }

/**
*  自定义外部钩子函数：比如-customFnForEcode
*/
     getViewMount = (context)=> [
       {
      ...context,
      customFnForEcode: this.customFnForEcode,
      },
     ];

//自定义函数获取内部搜索相关信息返回
    customFnForEcode=()=>{
       const dataPlugin = this.pluginCenter.use('Data')
       const listStore = dataPlugin?.opts?.getListStore?.();
       const dataParamsObj = listStore?.dataParamsObj || {};
       return dataParamsObj
    }
 }

 eventEmitter.once("@weapp/designer", `onBeforeMount_${comId}`, (plugin) => {
   plugin.registerPlugin(ExtraPlugin)
 });

/*********************按钮需要获取的地方js**************************************/

const ebSdk = window.ebuilderSDK;  //全局SDK
const pageSdk = ebSdk.getPageSDK();  //当前页面SDK
var comp = pageSdk.getCompInstance("b11ea9b6fd4e4d15ac0c23a385f241c4");
comp.customFnForEcode();//调用上面的钩子，使用的地方自定义调用
```

## 8、单元格内容复写可以通过renderCell钩子进行复写

> 参考顶部文档出处

```
import { eventEmitter } from '@weapp/utils';

const comId = 'eff5f11f260749e9a6d6fb151e3da51b' //需要注册插件的列表组件id

class ExtraPlugin {
  name = 'ExtraPlugin'

  onClick = (e) => {
    e?.stopPropagation();
    console.log(2222)
  }

  renderListItem = (hook) =>  {
    return (rowDatas, index, ...args) => {
      if(index % 2 === 0) {
        return <div style={{background: 'red'}}>
          {hook(rowDatas, index, ...args)}
        </div>
      }
      return hook(rowDatas, index, ...args)
    }
  }

  renderCell = (hook) => {
    return (opts, ...args) => {
      const _opts = {
        ...opts,
        data: {
          ...opts.data,
          '1': '自定义标题内容'
        },
        originValue: opts.field.id === '1' ? '自定义标题内容' : opts.data.originValue,
        value: opts.field.id === '1' ? '自定义标题内容' : opts.value
      }
      return (
        <div onClick={this.onClick}>
          <div style={{color: 'red'}}>自定义渲染单元格</div>
          {hook(_opts, ...args)}
        </div>
      )
    }
  }

  getTableColumns() {
    const columns = [
      {
        "id": "id",
        "name": "id",
        "objId": "910199253473665025",
        "text": "id",
        "compType": "Text",
        "type": "String",
        "mainField": true,
        "mainPrimaryKey": true,
        "compMarkType": "Field",
        "uid": "df1b7a4fd598479cba4e1a107a96ba7e",
        "multiSelect": ""
      }
    ]
    const syncFields = () => {
      return new Promise(resolve => {
        setTimeout(() => {
          console.log(1111)
          resolve(columns)
        }, 4000)
      })
    }
    return [[syncFields]]
  }
}

eventEmitter.once('@weapp/designer', `onBeforeMount_${comId}`, (plugin) => {
  plugin.registerPlugin(ExtraPlugin)
});
```

[图片附件未整合: ../../../../_assets/370052578848800768/002-df3268e4e4.png]

[图片附件未整合: ../../../../_assets/370052578848800768/003-e0250249b6.png]

案例2：修改原内容

```
class EbCusListViewPluginHook {
  name = 'EbCusListViewPluginHook';

  pluginCenter;

  renderCell = (hook) => {
    const listProps = this.list.props || {};
    const { config, userConfig = '{}' } = listProps;
    const self = this;
    return (opts, ...args) => {
      const { field, data } = opts || {};
      console.log(opts, data);
      if (field?.name === 'dhwb1') {
        const value = data?.[field?.id];
        if (value && value === '111') {
          return '自定义内容';
        }
        if (value && value === '222') {
          return <span className='custom-cls-bg-change'>{hook(opts, ...args)}</span>; // 外层自定义包裹一个span，需放在代码块或ecode中
        }
      }
      return hook(opts, ...args);//这个是原本渲染的内容
    };
  };
}

window.weappUtils.eventEmitter.on('@weapp/designer', 'plugin_center.ready.NList', ({ registerPlugin }) => {
  registerPlugin(EbCusListViewPluginHook);
});
```

## 9、数据列表-可编辑表格

### 9.1 自行隐藏编辑模式并设置为只读

```
class ExtraButtonPlugin {
  name = 'ExtraButtonPlugin'

  pluginCenter;

  onDidMount =()=>{
    console.log('####',123)
    setTimeout(()=>{
        this.list.updateReadonly(true);//设置只读
        this.list.updateShowEditModeSwitch(false);//设置默认不显示编辑切换图标
    },300)
  }
}

weappUtils.eventEmitter.on('@weapp/designer', 'plugin_center.ready.NList', ({ registerPlugin }) => {
  registerPlugin(ExtraButtonPlugin); // 可以传入组件实例
});
```

## 10、关联视图翻页后，滚动条置顶

> 关联视图

```
import { eventEmitter } from '@weapp/utils';
//组件id -- 需要修改自己的组件id
 const comId = 'fa50964e34c8446dab84dd74f3b38c1a'

 class ExtraPlugin {
   name = 'ExtraPlugin' // 插件唯一键，必须

    onBeforeMount() {
    // 监听数据回调
    this.pluginCenter.on('Data.dataload', this.onDataLoad);
  }

  destory() {
    this.pluginCenter.off('Data.dataload', this.onDataLoad);
  }

onDataLoad=()=>{
    const targetElement = document.querySelector(`#${comId} .ui-table-grid-body`);
  if (targetElement) {
    // 将滚动条置顶
    targetElement.scrollTop = 0;
  } 
}

 }
 
 eventEmitter.once("@weapp/designer", `onBeforeMount_${comId}`, (plugin) => {
   plugin.registerPlugin(ExtraPlugin)
 });
```

> exceltable

```
import { eventEmitter } from '@weapp/utils';
//组件id -- 需要修改自己的组件id
 const comId = 'f8cc87f5544a4035a0b412856fa98400'

 class ExtraPlugin {
   name = 'ExtraPlugin' // 插件唯一键，必须

    onBeforeMount() {
    // 监听数据回调
    this.pluginCenter.on('Data.dataload', this.onDataLoad);
  }

  destory() {
    this.pluginCenter.off('Data.dataload', this.onDataLoad);
  }

onDataLoad=()=>{
    const targetElement = document.querySelector(`#${comId} .needVerticalScrollBar`);
  if (targetElement) {
    // 将滚动条置顶
    targetElement.scrollTop = 0;
  } 
}

 }
 
 eventEmitter.once("@weapp/designer", `onBeforeMount_${comId}`, (plugin) => {
   plugin.registerPlugin(ExtraPlugin)
 });
```

## 11、新数据列表（mode=9）开启虚拟滚动

```

import { eventEmitter } from '@weapp/utils';
/**
 * 列表组件id
*  针对页面中单 个列表组件：
 */
 const comId= 'c535dbc9ef7a457ca61fa0d06bf6136d'
 class ExtraPlugin {
   name = 'ExtraPluginVitralModeList' // 插件唯一键，必须
 
   getTableProps = (props)=>{
     return [{
       ...props,
       useVirtual :{
         vertical: true,//数据量太大，开启虚拟滚动模式
       }
     }]
   }
 }

   eventEmitter.on("@weapp/designer", `onBeforeMount_${comId}`, (plugin) => {
     plugin.registerPlugin(ExtraPlugin)
   });

 

/****************************************************************************** */
import { eventEmitter } from '@weapp/utils';
/**
 * 列表组件id
*  针对页面中多个列表组件：
 */
 const comIdsArr = ['c535dbc9ef7a457ca61fa0d06bf6136d',"c535dbc9ef7a457ca61fa0d06bf643443"]
 class ExtraPlugin {
   name = 'ExtraPluginVitralModeList' // 插件唯一键，必须
 
   getTableProps = (props)=>{
     return [{
       ...props,
       useVirtual :{
         vertical: true,//数据量太大，开启虚拟滚动模式
       }
     }]
   }
 }

 comIdsArr.forEach(comId => {
   eventEmitter.on("@weapp/designer", `onBeforeMount_${comId}`, (plugin) => {
     plugin.registerPlugin(ExtraPlugin)
   });
 })
```

## 12、修改请求参数

```
 
import { eventEmitter } from '@weapp/utils';
// 列表组件id
 const comId = 'df0cf45615304e9ebf02639835b6eab6'
 class ExtraPlugin {
   name = `ExtraPlugin_${comId}` // 插件唯一键，必须
 // 例如，插入参数
 getDataParams = (params, ...args) => {
    let dataParams = {};
     console.log('####',params)

    if (params?.statisticsFilter) {
      dataParams.statisticsFilter = params.statisticsFilter;
    }
    return [dataParams, ...args];
  };
 }
 window.weappUtils.eventEmitter.once("@weapp/designer", `onBeforeMount_${comId}`, (plugin) => {
   plugin.registerPlugin(ExtraPlugin)
 });
```

## 13、数据列表批量操作按钮默认取消置灰，点击时校验提示

> 260501支持的钩子，业务场景不需要，无须过多关注

```
import { eventEmitter, regOvProps } from '@weapp/utils';

/**
 * 如果全局所有eb页面列表的批量操作都默认不要置灰，点击提示，可以使用这个demo
 */
class ExtraButtonBatchPlugin {
  name = 'ExtraButtonBatchPlugin'

 pluginCenter;

/**
 * 右下角按钮默认是否禁用（默认禁用）
 */
 getBatchListBtnEnableDisable = () => {
      return [false];
    };

/**
 * 右下角按钮点击前触发一个钩子，如果返回为true才能继续正常走后续逻辑，返回为false就不让执行下去（默认为true）
 */
    getBatchListBtnBeforeClickPermission = () => {
      const fn = ({ btn, step, checkedDatas, checkedKeys }) => {
        const isEmpty = !checkedKeys || checkedKeys.length === 0;
        if (isEmpty) {
          weappUi.Dialog.message({
            type:"info",
            content:"请至少选择一条数据"
          })
        }
        return Promise.resolve(!isEmpty);
      }
      return [fn];
    }

}

eventEmitter.on('@weapp/designer', 'plugin_center.ready.NList', ({ registerPlugin }) => {
  registerPlugin(ExtraButtonBatchPlugin); 
});
```

> 针对单一组件生效或多个

```
import { eventEmitter, regOvProps } from '@weapp/utils';

/** 需要配置的信息 --- start */
const comIds = [
  {
    comId: 'caf0737deb3344b3a2b4cdc2484bcb59',  // 建模数据列表组件id
  }
];
/** 需要配置的信息 --- end */

const getPlugin = (item) => {
  const { comId } = item;
  class DemoPlugin {
    name = `DemoPlugin_${comId}`;

    getBatchListBtnEnableDisable = () => {
      return [false];
    };

    getBatchListBtnBeforeClickPermission = () => {
      const fn = ({ btn, step, checkedDatas, checkedKeys }) => {
        const isEmpty = !checkedKeys || checkedKeys.length === 0;
        if (isEmpty) {
          alert('请选择数据')
        }
        return Promise.resolve(!isEmpty);
      }
      return [fn];
    }

  }
  return DemoPlugin;
}

comIds.forEach(item => {
  eventEmitter.on('@weapp/designer', `plugin_center.ready.${item.comId}`, ({ registerPlugin }) => {
    const plugin = getPlugin(item);
    registerPlugin(plugin);
  });
})
```
