---
name: deppon-pro-table-advanced-tabs
description: >-
    在一个页面用 el-tabs 组织多个 ProTable 场景：基础表、搜索表、行选、操作列、工具栏等，彼此独立 data/columns/ref。
    在用户提到分 tab、多表格并列 demo、同一页多套 ProTable 时应用。
---

# deppon-pro-table-advanced-tabs

## 依据来源（私有 npm）

-   **`deppon-npm-private-registry`**。
-   **`@deppon/deppon-template`**：`ProTable`。
-   **`@deppon/deppon-ui`**：`ElTabs`、`ElTabPane`、`ElCard` 等 — 以 `*.d.ts` 为准。
-   **`deppon-npm-skills`**。不默认读取 `deppon-npm` 的 `site/`。

## 要点

-   外层 `el-card` + `el-tabs`。每个 `el-tab-pane` 内独立：`ref`、`data-source`、`columns`、分页 ref、`@search`/`@reset`/`@selection-change` 等。
-   **搜索 tab**：`search-title`、`table-title`、`@search`、`@reset`、`search-cols`。
-   **行选 tab**：`:row-selection` + `@selection-change`，上方可展示已选 `el-tag`。
-   **操作列 tab**：列里配置 `slots` + `#action`；或 `:show-operations` + 操作插槽（按 **`ProTable`** 约定）。
-   **工具栏 tab**：`:toolbar-options`；`#paginationBefore` 放新建/导出等。

## 生成清单

-   [ ] 各 tab 的 `columns` 不要共享引用（避免联动污染）。
-   [ ] 每个 `pro-table` 有独立 `ref` 便于调试与调用暴露方法。