"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", figure: "figure", h1: "h1", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { id: "vue3--element-plus-实现高复用表格组件tablelayout--usetablepagination-全解", children: "Vue3 + Element Plus 实现高复用表格组件：TableLayout & useTablePagination 全解" }), "\n", _jsx(_components.h2, { id: "目录", children: "目录" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "#%E7%BB%84%E4%BB%B6%E6%A6%82%E8%BF%B0", children: "组件概述" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "#%E6%A0%B8%E5%BF%83%E5%8A%9F%E8%83%BD", children: "核心功能" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "#%E7%BB%84%E4%BB%B6-api", children: "组件 API" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "#usetablepagination-%E9%92%A9%E5%AD%90", children: "useTablePagination 钩子" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "#%E4%BD%BF%E7%94%A8%E7%A4%BA%E4%BE%8B", children: "使用示例" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "#%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5", children: "最佳实践" }) }), "\n"] }), "\n", _jsx(_components.h2, { id: "引言", children: "引言" }), "\n", _jsxs(_components.p, { children: ["在企业级中后台系统中，列表表格是使用频率最高的组件之一。随着项目的增长，复制粘贴的表格逻辑会导致大量重复代码和维护成本。为了解决这一问题，我们封装了一个通用的 ", _jsx(_components.code, { children: "TableLayout" }), " 组件，并配合分页钩子 ", _jsx(_components.code, { children: "useTablePagination" }), "，统一管理分页、排序、查询等逻辑。"] }), "\n", _jsx(_components.h2, { id: "组件概述", children: "组件概述" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "TableLayout" }), " 是一个功能完整的表格布局组件，集成了查询区域、操作区域、表格展示和分页功能。该组件基于 Element Plus 的 ", _jsx(_components.code, { children: "el-table" }), " 组件进行封装，并结合 ", _jsx(_components.code, { children: "useTablePagination" }), " 钩子实现了数据加载和分页的统一管理。"] }), "\n", _jsx(_components.h3, { id: "特点", children: "特点" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "响应式布局设计" }), "\n", _jsx(_components.li, { children: "集成查询区域（可折叠）" }), "\n", _jsx(_components.li, { children: "支持表格列显示控制" }), "\n", _jsx(_components.li, { children: "内置分页功能" }), "\n", _jsx(_components.li, { children: "支持表格排序" }), "\n", _jsx(_components.li, { children: "自适应高度计算" }), "\n"] }), "\n", _jsx(_components.h2, { id: "核心功能", children: "核心功能" }), "\n", _jsx(_components.h3, { id: "1-布局结构", children: "1. 布局结构" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "TableLayout\n├── 查询区域 (可折叠)\n├── 表格区域\n│ ├── 操作工具栏\n│ ├── 表格主体\n│ └── 分页器\n└── 右侧工具栏\n" }) }), "\n", _jsx(_components.h3, { id: "2-数据管理", children: "2. 数据管理" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["使用 ", _jsx(_components.code, { children: "useTablePagination" }), " 钩子统一管理表格数据"] }), "\n", _jsx(_components.li, { children: "支持数据格式化" }), "\n", _jsx(_components.li, { children: "支持自定义查询参数" }), "\n", _jsx(_components.li, { children: "内置加载状态管理" }), "\n"] }), "\n", _jsx(_components.h2, { id: "组件-api", children: "组件 API" }), "\n", _jsx(_components.h3, { id: "props", children: "Props" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "属性名" }), _jsx(_components.th, { children: "类型" }), _jsx(_components.th, { children: "默认值" }), _jsx(_components.th, { children: "说明" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "fetchApi" }), _jsx(_components.td, { children: "Function" }), _jsx(_components.td, { children: "() => " }), _jsx(_components.td, { children: "数据获取函数" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "params" }), _jsx(_components.td, { children: "Object" }), _jsx(_components.td, {}), _jsx(_components.td, { children: "查询参数对象" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "formatData" }), _jsx(_components.td, { children: "Function" }), _jsx(_components.td, { children: "data => data" }), _jsx(_components.td, { children: "数据格式化函数" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "isPagination" }), _jsx(_components.td, { children: "Boolean" }), _jsx(_components.td, { children: "true" }), _jsx(_components.td, { children: "是否显示分页" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "defaultSort" }), _jsx(_components.td, { children: "Object" }), _jsx(_components.td, { children: "null" }), _jsx(_components.td, { children: "默认排序配置" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "...attrs" }), _jsx(_components.td, { children: "-" }), _jsx(_components.td, { children: "-" }), _jsxs(_components.td, { children: ["可接受所有", _jsx(_components.code, { children: "el-table" }), "的参数或者方法"] })] })] })] }), "\n", _jsx(_components.h3, { id: "slots", children: "Slots" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "插槽名" }), _jsx(_components.th, { children: "说明" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "query" }), _jsx(_components.td, { children: "查询区域内容" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "operation" }), _jsx(_components.td, { children: "操作区域内容" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "table" }), _jsx(_components.td, { children: "表格列定义" })] })] })] }), "\n", _jsx(_components.h2, { id: "usetablepagination-钩子", children: "useTablePagination 钩子" }), "\n", _jsx(_components.h3, { id: "功能说明", children: "功能说明" }), "\n", _jsx(_components.p, { children: "提供表格数据加载、分页管理的统一解决方案。" }), "\n", _jsx(_components.h3, { id: "参数", children: "参数" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "typescript", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "typescript", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " useTablePagination" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "api" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " ApiParam" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">," }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " options" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " TableOptions" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">):" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " TablePaginationResult" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }) }) }) }), "\n", _jsx(_components.h3, { id: "选项接口", children: "选项接口" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "typescript", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "interface" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " TableOptions" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " formatData" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "?:" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "data" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " T" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "[]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " any" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " immediate" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "?:" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " boolean" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " queryParams" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " ComputedRef" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "QueryParams" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " |" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " QueryParams" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.h3, { id: "返回值", children: "返回值" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "typescript", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " getTableData" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ()" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Promise" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 获取表格数据" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " pageRef" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Ref" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "number" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">;" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 当前页码" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " pageSizeRef" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Ref" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "number" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">;" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 每页条数" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " tableData" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Ref" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "T" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "[]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">;" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 表格数据" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " totalRef" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Ref" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "number" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">;" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 总条数" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " loadingRef" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Ref" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "boolean" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">;" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 加载状态" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.h2, { id: "使用示例", children: "使用示例" }), "\n", _jsx(_components.h3, { id: "基础用法", children: "基础用法" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "vue", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "vue", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "template" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "TableLayout" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " :fetch-api" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "fetchList" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " :params" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "queryParams" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " :format-data" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "formatTableData" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "template" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " #" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "query" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "el-form" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " :model" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "queryParams" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "template" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " #" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "operation" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "el-button" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " type" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "primary" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "新增" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "template" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " #" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "table" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "el-table-column" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " prop" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "name" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " label" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "名称" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "el-table-column" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " prop" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "status" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " label" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "状态" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "script" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " setup" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " lang" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "ts" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " ref" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "vue" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " queryParams " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " ref" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " pageNum" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 1" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " pageSize" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 10" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 其他查询参数" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " fetchList " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " async" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "params" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 实现数据获取逻辑" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " rows" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " []" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " total" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 0" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "};" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " formatTableData " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "data" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 数据格式化逻辑" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " data" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "};" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] })] }) }) }), "\n", _jsx(_components.h2, { id: "最佳实践", children: "最佳实践" }), "\n", _jsx(_components.h3, { id: "1-查询参数管理", children: "1. 查询参数管理" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "typescript", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " queryParams " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " ref" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " pageNum" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 1" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " pageSize" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 10" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " keyword" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ''" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " status" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " null" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] })] }) }) }), "\n", _jsx(_components.h3, { id: "2-api-封装", children: "2. API 封装" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "typescript", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " request" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@/utils/request" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " getList" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "params" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " QueryParams" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " request" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " url" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "/api/list" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " method" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "get" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " params" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.h3, { id: "3-数据格式化", children: "3. 数据格式化" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "typescript", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " formatTableData " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "data" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " any" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "[]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " data" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "map" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "item" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " ..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "item" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " statusText" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " item" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "status" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ===" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 1" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ?" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "启用" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " :" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "禁用" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "))" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "};" }) })] }) }) }), "\n", _jsx(_components.h3, { id: "4-表格排序", children: "4. 表格排序" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "vue", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "vue", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "TableLayout" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " :" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "default-sort" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " prop" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "date" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#E53935" }, children: " order" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "descending" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] })] }) }) }), "\n", _jsx(_components.h2, { id: "注意事项", children: "注意事项" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["确保 ", _jsx(_components.code, { children: "fetchApi" }), " 返回的数据格式符合 ", _jsx(_components.code, { children: "PageApiResult" }), " 接口要求"] }), "\n", _jsxs(_components.li, { children: ["使用 ", _jsx(_components.code, { children: "formatData" }), " 处理特殊的数据转换需求"] }), "\n", _jsxs(_components.li, { children: ["合理使用 ", _jsx(_components.code, { children: "immediate" }), " 选项控制初始加载"] }), "\n", _jsx(_components.li, { children: "注意表格高度自适应可能受父容器影响" }), "\n", _jsx(_components.li, { children: "排序功能需要后端支持，确保接口能正确处理排序参数" }), "\n", _jsx(_components.li, { children: "查询区域的折叠状态会被保持，可通过右侧工具栏控制" }), "\n"] }), "\n", _jsx(_components.h2, { id: "类型定义", children: "类型定义" }), "\n", _jsx(_components.h3, { id: "pageapiresult-接口", children: "PageApiResult 接口" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "typescript", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "interface" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " PageApiResult" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " rows" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " T" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "[]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " total" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " number" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.h3, { id: "queryparams-接口", children: "QueryParams 接口" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "typescript", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "interface" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " QueryParams" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " pageNum" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " number" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " pageSize" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " number" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " orderByColumn" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "?:" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " string" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " isAsc" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "?:" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " string" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "key" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " string" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " any" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.h3, { id: "sort-接口", children: "Sort 接口" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "typescript", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "interface" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Sort" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " prop" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " string" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " order" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "ascending" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " |" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "descending" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.h2, { id: "总结", children: "总结" }), "\n", _jsxs(_components.p, { children: ["通过 ", _jsx(_components.code, { children: "TableLayout" }), " 和 ", _jsx(_components.code, { children: "useTablePagination" }), " 的组合，可以极大地提升列表页的开发效率与一致性。该方案适用于中后台系统的通用数据列表场景，推荐在团队项目中统一规范使用。"] }), "\n", _jsxs(_components.p, { children: ["👉 ", _jsx(_components.a, { href: "https://github.com/Lizh606/TableLayout", children: "项目源码地址" }), " 欢迎 Star 或提出建议。"] }), "\n", _jsx(_components.p, { children: "如果你在实践中遇到问题，欢迎评论交流。" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };