@jzt-packages/components 1.0.0

package/src/JztQueryTable/QueryTable /345/212/237/350/203/275.md"

@@ -0,0 +1,1580 @@
+## 前言 📖
+
+## 一、QueryTable 功能 🚀🚀🚀
+
+> QueryTable 组件目前使用属性透传进行重构，支持 **el-table && el-table-column** 所有属性、事件、方法的调用，不会有任何心智负担。
+
+- 表格内容自适应屏幕宽高，溢出内容表格内部滚动（flex 布局）
+- 表格搜索、重置、分页查询 Hooks 封装 （页面使用不会存在任何搜索、重置、分页查询逻辑）
+- 表格数据操作 Hooks 封装 （单条数据删除、批量删除、重置密码、状态切换等操作）
+- 表格数据多选 Hooks 封装 （支持现跨页勾选数据）
+- 表格数据导入组件、导出 Hooks 封装
+- 表格搜索区域使用 Grid 布局重构，支持自定义响应式配置
+- 表格分页组件封装（Pagination）支持静态数据分页
+- 表格数据刷新、列显隐、搜索区域显隐设置
+- 表格配置 columns 支持动态更新
+- 表格支持行拖拽排序、单选框设置
+- 表格配置支持多级 prop（示例 ==> prop: user.detail.name）
+- 单元格内容格式化、tag 标签显示（有字典 enum 会根据字典 enum 自动格式化）
+- 支持多级表头、表头内容自定义渲染（支持作用域插槽、tsx 语法、h 函数）
+- 支持单元格内容自定义渲染（支持作用域插槽、tsx 语法、h 函数）
+- 配合 TreeFilter、SelectFilter 组件使用更佳（项目中有使用示例）
+
+## 二、QueryTable 功能 🚀🚀🚀 功能需求分析 📑
+
+### 首先我们来看效果图（总共可以分为五个模块）
+
+- 1、表格搜索区域
+- 2、表格数据操作按钮区域
+- 3、表格功能按钮区域
+- 4、表格主体内容展示区域
+- 5、表格分页区域
+
+### 1、表格搜索区域需求分析：
+
+> 可以看到搜索区域的字段都是存在于表格当中的，并且每个页面的搜索、重置方法都是一样的逻辑，只是不同的查询参数而已。我们完全可以在一个表单配置项 **queryItems** 时，直接配置**search** 参数，就能把该项变为搜索项，然后使用 **el** 字段可以指定搜索框的类型，最后把表格的搜索方法都封装成 **Hooks** 钩子函数。页面上完全就不会存在任何搜索、重置逻辑了。
+
+> 搜索组件在通过 **component :is** 动态组件 && **v-bind** 属性透传实现，将用户传递的参数全部透传到组件上，所以大家可以直接根据 **element** 官方文档在 **props** 中传递参数了。以下代码还结合了自己逻辑上的一些处理：
+
+> **表格搜索项可使用 tsx 组件自定义渲染**
+
+```html
+html代码解读复制代码
+<script setup lang="tsx">
+   {
+    prop: "age",
+    label: "年龄",
+    search: {
+      // 自定义 search 组件
+      render: ({ searchParam }) => {
+        return (
+          <div class="flx-center">
+            <el-input vModel_trim={searchParam.minAge} placeholder="最小年龄" style={{ width: "50%" }} />
+            <span class="mr10 ml10">-</span>
+            <el-input vModel_trim={searchParam.maxAge} placeholder="最大年龄" style={{ width: "50%" }} />
+          </div>
+        );
+      }
+    }
+  },
+</script>
+```
+
+> 表格搜索组件支持响应式配置，使用 **Grid** 方法进行整体重构 😋。
+
+![动画.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c415a959108e4af3be10d90a5b85b92c~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1688&h=886&s=23176418&e=gif&f=581&b=fdfdfd)
+
+### 2、表格数据操作按钮区域需求分析：
+
+> 表格数据操作按钮基本上每个页面都会不一样，所以我们直接使用 **作用域插槽** 来完成每个页面的数据操作按钮区域，**作用域插槽** 可以将表格多选数据信息从 **QueryTable** 的 **Hooks** 多选钩子函数中传到页面上使用。
+
+> **scope** 数据中包含：**selectedList（当前选择的数据）、selectedListIds（当前选择的数据id）、isSelected（当前是否选中的数据）**
+
+```html
+html代码解读复制代码
+<!-- ProTable 中 tableHeader 插槽 -->
+<slot name="tableHeader" :selected-list="selectedList" :selected-list-ids="selectedListIds" :is-selected="isSelected" />
+
+<!-- 页面使用 -->
+<template #tableHeader="scope">
+  <el-button type="primary" @click="openDrawer('新增')">新增用户</el-button>
+</template>
+```
+
+### 3、表格功能按钮区域分析：
+
+这块区域没什么特殊功能，只有四个按钮，其功能分别为：
+
+> **表格数据刷新（一直会携带当前查询和分页条件）**、
+>
+> **表格全屏/退出全屏**、
+>
+> **表格列设置（列显隐、列排序）**、
+>
+> **表格搜索区域显隐**（方便展示更多的数据信息）**。 **
+>
+> 可通过 **toolButton** 属性控制这块区域的显隐。
+
+### 4、表格主体内容展示区域分析：
+
+> 🍉 该区域是最重要的数据展示区域，对于使用最多的功能就是表头和单元格内容可以自定义渲染，自定义表头只支持传入`renderHeader`方法，自定义单元格内容只支持`slot`插槽。
+
+> 💥 表头支持`headerRender`方法（避免与 **el-table-column** 上的属性重名导致报错）、作用域插槽（`column.prop + 'Header'`）两种方式自定义，单元格内容支持`render`方法和作用域插槽（`column 上的 prop 属性`）两种方式自定义。
+
+- 使用作用域插槽：
+
+```html
+html代码解读复制代码
+<!-- 使用作用域插槽自定义单元格内容 username -->
+<template #username="scope">{{ scope.row.username }}</template>
+
+<!-- 使用作用域插槽自定义表头内容 username -->
+<template #usernameHeader="scope">
+  <el-button type="primary" @click="ElMessage.success('我是通过作用域插槽渲染的表头')">
+    {{ scope.column.label }}
+  </el-button>
+</template>
+```
+
+- 使用 tsx 语法：
+
+```html
+html代码解读复制代码
+<script setup lang="tsx">
+  const columns = reactive<ColumnProps<User.ResUserList>[]>([
+   {
+      prop: "username",
+      label: "用户姓名",
+      // 使用 headerRender 自定义表头
+      headerRender: scope => {
+        return (
+          <el-button
+            type="primary"
+            onClick={() => {
+              ElMessage.success("我是通过 tsx 语法渲染的表头");
+            }}
+          >
+            {scope.column.label}
+          </el-button>
+        );
+      }
+    },
+    {
+      prop: "status",
+      label: "用户状态",
+      // 使用 render 自定义表格内容
+      render: scope => {
+        return (
+            <el-switch
+              model-value={scope.row.status}
+              active-text={scope.row.status ? "启用" : "禁用"}
+              active-value={1}
+              inactive-value={0}
+              onClick={() => changeStatus(scope.row)}
+            />
+          )
+        );
+      }
+    },
+  ];
+</script>
+```
+
+### 5、表格主体操作列展示分析：
+
+> 🍉 该区域是每一列数据的操作区域，支持函数或者boolean控制按钮的展示隐藏，可以自动效验用户permission；自动插入click事件。
+
+> 💥 操作项支持`JSON配置`、`render函数`、`自定义slot`方法，3种方式自定义；
+
+- \*\*
+
+```html
+html代码解读复制代码
+<template>
+   <JztQueryTable>
+       <!-- 表格操作--插槽 -->
+       <template #resetPassSlot="row">{{ row.username }}</template>
+    <JztQueryTable>
+</template>
+
+<script setup lang="tsx" name="ProTable">
+{
+  prop: 'operation',
+  label: '操作',
+  fixed: 'right',
+  width: 220,
+  btnLList: [
+    {
+      text: '重置密码',
+      hasPerm: 'table-edit',
+      fun: (row: any) => { resetPass(row) }
+    },
+    {
+      text: '重置',
+      hasPerm: 'table-reset',
+      // slot显示内容
+      slotName: 'resetPassSlot',
+      fun: (row: any) => { resetPass(row}
+    },
+    {
+      id: 'delete',
+      text: '删除',
+      type: 'danger',
+      hasPerm: 'table-delete',
+      // 自定义 render 显示内容
+      render: () => {
+        return <span style="color:red">删除</span>
+      },
+      fun: (row: any) => { deleteAccount(row) }
+    }
+  ]
+}
+</script>
+```
+
+> 💢💢💢 **最强大的功能：如果你想使用 `el-table` 的任何属性、事件，目前通过属性透传都能支持。**
+>
+> **如果你还不了解属性透传，请阅读 vue 官方文档：[cn.vuejs.org/guide/compo…](https://link.juejin.cn/?target=https%3A%2F%2Fcn.vuejs.org%2Fguide%2Fcomponents%2Fattrs.html)**
+
+- **QueryTable 组件上的绑定的所有属性和事件都会通过 `v-bind="$attrs"` 透传到 el-table 上。**
+- **QueryTable组件内部暴露了 el-table DOM，可通过 `QueryTable.value.element.方法名` 调用其方法。**
+
+```html
+html代码解读复制代码
+<template>
+  <el-table ref="tableRef" v-bind="$attrs"></el-table>
+</template>
+
+<script setup lang="ts" name="ProTable">
+  // import { ref } from 'vue'
+  import { ElTable } from 'element-plus'
+
+  const tableRef = ref<InstanceType<typeof ElTable>>()
+
+  defineExpose({ element: tableRef })
+</script>
+```
+
+### 6、表格分页区域分析：
+
+> 分页区域也没有什么特殊的功能，该支持的都支持了🤣（页面上使用 QueryTable组件完全不存在分页逻辑）
+
+## 三、QueryTable 文档 📚
+
+### 1、QueryTable 属性（TableConfigProps）：
+
+> 使用 `v-bind="$attrs"` 通过属性透传将 **QueryTable ** 组件属性全部透传到 **el-table** 上，所以我们支持 **el-table** 的所有 **Props** 属性。在此基础上，还扩展了以下 **Props：**
+
+| 属性名       | 类型             | 是否必传 | 默认值                                      | 属性描述                                                                                             |
+| ------------ | ---------------- | -------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| queryItems   | QueryItemsProps  | ✅       | []                                          | QueryTable组件会根据此字段渲染搜索表单QueryItemsProps                                                |
+| data         | Array            | ✅       | —                                           | 静态 tableData 数据（支持分页），若存在则不会使用 requestApi 返回的 data                             |
+| topList      | Array            | ✅       |                                             | 表格功能按钮区域                                                                                     |
+| columns      | Array            | ✅       |                                             | QueryTable组件会根据此字段渲染搜索表格列（支持动态更新），详情见 ColumnProps                         |
+| requestApi   | Function         | ❌       | —                                           | 获取表格数据的请求 API                                                                               |
+| requestAuto  | Boolean          | ❌       | true                                        | 表格初始化时是否自动执行请求 API                                                                     |
+| requestError | Function         | ❌       | —                                           | 表格 API 请求错误监听                                                                                |
+| dataCallback | Function         | ❌       | —                                           | 后台返回数据的回调函数，可对后台返回数据进行处理                                                     |
+| title        | String           | ❌       | —                                           | 表格标题，目前没有用到                                                                               |
+| pagination   | Boolean          | ❌       | true                                        | 是否显示分页组件：pagination 为 false 后台返回数据应该没有分页信息 和 list 字段，data 就是 list 数据 |
+| initParam    | Object           | ❌       | {}                                          | 表格请求的初始化参数，该值变化会重新请求表格数据                                                     |
+| toolButton   | Boolean \| Array | ❌       | true                                        | 是否显示表格功能按钮，支持（["refresh" \| "setting" \| "search"]）                                   |
+| rowKey       | String           | ❌       | 'id'                                        | 当表格数据多选时，所指定的 id                                                                        |
+| searchCol    | Number \| Object | ❌       | { xs: 1, sm: 2, md: 3, lg: 4, xl: 5,xxl:6 } | 表格搜索项每列占比配置                                                                               |
+
+### 2、QueryItems配置（QueryItemsProps）：
+
+> 使用 `v-bind="{ ...handleSearchProps, ...placeholder, searchParam: _searchParam, clearable }""` 通过属性透传将每一项 **column** 属性全部透传到 **el-table-column** 上，所以我们支持 **el-form 的所有 **Props\*\* 属性。
+
+| 属性名     | 类型              | 是否必传 | 默认值 | 属性描述                                                                                        |
+| ---------- | ----------------- | -------- | ------ | ----------------------------------------------------------------------------------------------- |
+| label      | String            | ❌       | —      | 对应表单的label                                                                                 |
+| prop       | Boolean           | ❌       | false  | 对应表单的prop ，查询接口所需要的字段名称                                                       |
+| isShow     | Boolean           | ❌       | true   | 是否显示在表单当中                                                                              |
+| search     | SearchProps       | ❌       | —      | 搜索项配置，详情见 SearchProps                                                                  |
+| enum       | Array \| Function | ❌       | —      | 字典，可格式化单元格内容，还可以作为搜索框的下拉选项（字典可以为 API 请求函数，内部会自动执行） |
+| fieldNames | Object            | ❌       | —      | 指定 label && value && children 的 key 值                                                       |
+|            |                   |          |        |                                                                                                 |
+
+### 3、搜索项 配置（SearchProps）：
+
+> 使用 ` v-bind="{ ...handleSearchProps, ...placeholder, searchParam: _searchParam, clearable }"` 通过属性透传将 **search.props** 属性全部透传到每一项搜索组件上，所以我们支持:
+>
+> **'el-input'|'el-input-number'|'el-select'|'el-select-v2'|'el-tree-select'|'el-cascader'| 'el-date-picker'| 'el-time-picker' |'el-time-select'| 'el-switch'|'el-slider'**，大部分属性，并在其基础上还扩展了以下 **Props：**
+
+| 属性名       | 类型     | 是否必传 | 默认值 | 属性描述                                                                                                                                       |
+| ------------ | -------- | -------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| el           | String   | ❌       | —      | 当前项搜索框的类型，支持：input、input-number、select、select-v2、tree-select、cascader、date-picker、time-picker、time-select、switch、slider |
+| label        | String   | ❌       | —      | 当搜索项 label，如果不指定默认取 column 的 label                                                                                               |
+| props        | Object   | ❌       | —      | 根据 element plus 官方文档来传递，该属性所有值会透传到组件                                                                                     |
+| key          | String   | ❌       | —      | 当搜索项 key 不为 prop 属性时，可通过 key 指定                                                                                                 |
+| tooltip      | String   | ❌       | —      | 搜索提示                                                                                                                                       |
+| order        | Number   | ❌       | —      | 搜索项排序（从小到大）                                                                                                                         |
+| span         | Number   | ❌       | 1      | 搜索项所占用的列数，默认为 1 列                                                                                                                |
+| offset       | Number   | ❌       | —      | 搜索字段左侧偏移列数                                                                                                                           |
+| defaultValue | Any      | ❌       | —      | 搜索项默认值（该值重置时会重置回初始值）                                                                                                       |
+| render       | Function | ❌       |        | 自定义搜索内容渲染（tsx 语法、h 语法）                                                                                                         |
+
+### 4、topList配置（TopButtonProps）：
+
+> \*\*
+
+| 属性名     | 类型     | 是否必传 | 默认值  | 属性描述                                                    |
+| ---------- | -------- | -------- | ------- | ----------------------------------------------------------- |
+| id         | String   | ❌       | —       | 唯一标识                                                    |
+| text       | String   | ❌       | —       | 按钮的显示文字                                              |
+| type       | String   | ❌       | default | ''\|primary'\|'success'\|'warning\|'danger'\|'info'\|'text' |
+| hasPerm    | String   | ❌       | —       |                                                             |
+| loading    | Boolean  | ❌       | false   | 是否loading                                                 |
+| icon       | String   | ❌       | —       | 按钮图标，支持element-plus内部的icon                        |
+| fun        | Function | ❌       | —       | 点击函数                                                    |
+| hideFun    | Function | ❌       | —       | 隐藏函数 需要return Boolean                                 |
+| disabled   | boolean  | ❌       | false   | 禁用                                                        |
+| disabledFn | Function | ❌       | —       | 禁用函数 需要return Boolean                                 |
+| render     | Function | ❌       | —       | render函数                                                  |
+| .......    | .......  | .......  | ....... | 遵循el-button其他属性                                       |
+| circle     | false    | ❌       | —       | 是否为圆角按钮                                              |
+| plain      | boolean  | ❌       | false   | 是否为朴素按钮                                              |
+| link       | boolean  | ❌       | false   | 是否为链接按钮                                              |
+| round      | boolean  | ❌       | false   |                                                             |
+|            |          |          |         |                                                             |
+
+####
+
+### 5、Column 配置（ColumnProps）：
+
+> 使用 `v-bind="column"` 通过属性透传将每一项 **column** 属性全部透传到 **el-table-column** 上，所以我们支持 **el-table-column** 的所有 **Props** 属性。在此基础上，还扩展了以下 **Props：**
+
+| 属性名       | 类型              | 是否必传 | 默认值 | 属性描述                                                                                        |
+| ------------ | ----------------- | -------- | ------ | ----------------------------------------------------------------------------------------------- |
+| type         | String            | ❌       | —      | 对应列的类型（"index" \| "selection" \| "radio" \| "expand" \| "sort"）                         |
+| tag          | Boolean           | ❌       | false  | 当前单元格值是否为标签展示，可通过 enum 数据中 tagType 字段指定 tag 类型                        |
+| isShow       | Boolean           | ❌       | true   | 当前列是否显示在表格内，设置只搜索不展示在表格中（只对 prop 列生效）                            |
+| isSetting    | Boolean           | ❌       | true   | 当前列是否在 ColSetting 中可配置（只对 prop 列生效）                                            |
+| enum         | Array \| Function | ❌       | —      | 字典，可格式化单元格内容，还可以作为搜索框的下拉选项（字典可以为 API 请求函数，内部会自动执行） |
+| isFilterEnum | Boolean           | ❌       | true   | 当前单元格值是否根据 enum 格式化（例如 enum 只作为搜索项数据，不参与内容格式化）                |
+| fieldNames   | Object            |          | —      | 指定 label && value && children 的 key 值                                                       |
+| render       | Function          | ❌       | —      | 自定义单元格内容渲染（tsx 语法、h 语法）                                                        |
+| \_children   | ColumnProps       | ❌       | —      | 多级表头                                                                                        |
+|              |                   |          |        |                                                                                                 |
+|              |                   |          |        |                                                                                                 |
+
+#### 5.1 Column - operation 配置（TopButtonProps）
+
+同4topList配置（TopButtonProps）
+
+### 6、QueryTable 事件：
+
+> 根据 **ElementPlus Table** 文档在 **QueryTable ** 组件上绑定事件即可，组件会通过 **$attrs** 透传给 **el-table**。
+
+| 事件名   | 描述                     | 回调参数               |
+| -------- | ------------------------ | ---------------------- |
+| dragSort | 表格拖拽排序成功后触发， | { newIndex, oldIndex } |
+| search   | 点击表格搜索按钮时会触发 | —                      |
+| reset    | 点击表格重置按钮时会触发 | —                      |
+
+### 7、QueryTable 方法：
+
+> **QueryTable ** 组件暴露了 **el-table** 实例和一些组件内部的参数和方法：
+
+| 方法名              | 描述                                                                                  |
+| ------------------- | ------------------------------------------------------------------------------------- |
+| element             | `el-table` 实例，可以通过`QueryTable.value.element.***()`来调用 `el-table` 的所有方法 |
+| tableData           | 当前页面所展示的数据                                                                  |
+| radio               | 当前表格单选值（指定 type 为 "radio" 时可取到）                                       |
+| pageable            | 当前表格的分页数据                                                                    |
+| searchParam         | 所有的搜索参数，不包含分页                                                            |
+| searchInitParam     | 所有的搜索初始化默认的参数                                                            |
+| getTableList        | 获取、刷新表格数据的方法（携带所有参数）                                              |
+| search              | 表格查询方法，相当于点击搜索按钮                                                      |
+| reset               | 重置表格查询参数，相当于点击重置按钮                                                  |
+| handleSizeChange    | 表格每页条数改变触发的事件                                                            |
+| handleCurrentChange | 表格当前页改变触发的事件                                                              |
+| clearSelection      | 清空表格所选择的数据，除此方法之外还可使用 `proTable.value.element.clearSelection()`  |
+| enumMap             | 当前表格使用的所有字典数据（Map 数据结构）                                            |
+| isSelected          | 表格是否选中数据                                                                      |
+| selectedList        | 表格选中的数据列表                                                                    |
+| selectedListIds     | 表格选中的数据列表的 id                                                               |
+
+### 8、QueryTable 插槽：
+
+| 插槽名                   | 描述                                                                                                                                    |
+| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
+| —                        | 默认插槽，支持直接在 QueryTable中写 el-table-column 标签                                                                                |
+| tableHeader              | 自定义表格头部左侧区域的插槽，一般情况该区域放操作按钮                                                                                  |
+| toolButton               | 自定义表格头部左右侧侧功能区域的插槽                                                                                                    |
+| append                   | 插入至表格最后一行之后的内容， 如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。 若表格有合计行，该 slot 会位于合计行之上。 |
+| empty                    | 当表格数据为空时自定义的内容                                                                                                            |
+| pagination               | 分页组件插槽                                                                                                                            |
+| `column.prop`            | 单元格的作用域插槽                                                                                                                      |
+| `column.prop` + "Header" | 表头的作用域插槽                                                                                                                        |
+
+## 四、代码实现 & 基础使用 💪（代码较多，详情请去项目里查看）
+
+> 🤔 **前提：在封装 ProTable 组件的时候，在不影响 el-table 原有的属性、事件、方法的前提下，然后在其基础上做二次封装。**
+
+> 🧐 **思路：把一个表格页面所有重复的功能 （表格多选、查询、重置、刷新、分页、数据操作二次确认、文件下载、文件上传） 都封装成 Hooks 函数钩子或组件，然后在 QueryTable 组件中使用这些函数钩子或组件。在页面中使用的时，只需传给 QueryTable 当前表格数据的请求 API、表格配置项 columns 就行了，数据传输都使用 作用域插槽 或 tsx 语法从 ProTable 传递给父组件就能在页面上获取到了。**
+
+### 1、常用 Hooks 函数
+
+- **useTable：**
+
+```ts
+ts代码解读复制代码import { Table } from "./interface";
+import { reactive, computed, toRefs } from "vue";
+
+/**
+ * @description table 页面操作方法封装
+ * @param {Function} api 获取表格数据 api 方法 (必传)
+ * @param {Object} initParam 获取数据初始化参数 (非必传，默认为{})
+ * @param {Boolean} isPageable 是否有分页 (非必传，默认为true)
+ * @param {Function} dataCallBack 对后台返回的数据进行处理的方法 (非必传)
+ * */
+export const useTable = (
+  validateSearchForm?: () => Promise<any>,
+  api?: (params: any) => Promise<any>,
+  initParam: object = {},
+  isPageable: boolean = true,
+  dataCallBack?: (data: any) => any,
+  requestError?: (error: any) => void
+) => {
+  const state = reactive<Table.StateProps>({
+    // 表格数据
+    tableData: [],
+    // 分页数据
+    pageable: {
+      // 当前页数
+      pageIndex: 1,
+      // 每页显示条数
+      pageSize: 10,
+      // 总条数
+      total: 0
+    },
+    // 查询参数(只包括查询)
+    searchParam: {},
+    // 初始化默认的查询参数
+    searchInitParam: {},
+    // 总参数(包含分页和查询参数)
+    totalParam: {}
+  });
+
+  /**
+   * @description 分页查询参数(只包括分页和表格字段排序,其他排序方式可自行配置)
+   * */
+  const pageParam = computed({
+    get: () => {
+      return {
+        pageIndex: state.pageable.pageIndex,
+        pageSize: state.pageable.pageSize
+      };
+    },
+    set: (newVal: any) => {
+      console.log("我是分页更新之后的值", newVal);
+    }
+  });
+
+  /**
+   * @description 获取表格数据
+   * @return void
+   * */
+  const getTableList = async () => {
+    if (!api) return;
+      // 效验查询部分的必填项
+     if (validateSearchForm) {
+        const valid = await validateSearchForm()
+        if (!valid) return
+      }
+    try {
+      // 先把初始化参数和分页参数放到总参数里面
+      Object.assign(state.totalParam, initParam, isPageable ? pageParam.value : {});
+      let { data } = await api({ ...state.searchInitParam, ...state.totalParam });
+      dataCallBack && (data = dataCallBack(data));
+      state.tableData = isPageable ? data.list : data;
+      // 解构后台返回的分页数据 (如果有分页更新分页信息)
+      if (isPageable) {
+        state.pageable.total = data.total;
+      }
+    } catch (error) {
+      requestError && requestError(error);
+    }
+  };
+
+  /**
+   * @description 更新查询参数
+   * @return void
+   * */
+  const updatedTotalParam = () => {
+    state.totalParam = {};
+    // 处理查询参数，可以给查询参数加自定义前缀操作
+    let nowSearchParam: Table.StateProps["searchParam"] = {};
+    // 防止手动清空输入框携带参数（这里可以自定义查询参数前缀）
+    for (let key in state.searchParam) {
+      // 某些情况下参数为 false/0 也应该携带参数
+      if (state.searchParam[key] || state.searchParam[key] === false || state.searchParam[key] === 0) {
+        nowSearchParam[key] = state.searchParam[key];
+      }
+    }
+    Object.assign(state.totalParam, nowSearchParam, isPageable ? pageParam.value : {});
+  };
+
+  /**
+   * @description 表格数据查询
+   * @return void
+   * */
+  const search = () => {
+    state.pageable.pageIndex = 1;
+    updatedTotalParam();
+    getTableList();
+  };
+
+  /**
+   * @description 表格数据重置
+   * @return void
+   * */
+  const reset = () => {
+    state.pageable.pageIndex = 1;
+    // 重置搜索表单的时，如果有默认搜索参数，则重置默认的搜索参数
+    state.searchParam = { ...state.searchInitParam };
+    updatedTotalParam();
+    getTableList();
+  };
+
+  /**
+   * @description 每页条数改变
+   * @param {Number} val 当前条数
+   * @return void
+   * */
+  const handleSizeChange = (val: number) => {
+    state.pageable.pageIndex = 1;
+    state.pageable.pageSize = val;
+    getTableList();
+  };
+
+  /**
+   * @description 当前页改变
+   * @param {Number} val 当前页
+   * @return void
+   * */
+  const handleCurrentChange = (val: number) => {
+    state.pageable.pageIndex = val;
+    getTableList();
+  };
+
+  return {
+    ...toRefs(state),
+    getTableList,
+    search,
+    reset,
+    handleSizeChange,
+    handleCurrentChange,
+    updatedTotalParam
+  };
+};
+```
+
+- **useSelection：**
+
+```ts
+ts代码解读复制代码import { ref, computed } from "vue";
+
+/**
+ * @description 表格多选数据操作
+ * @param {String} rowKey 当表格可以多选时，所指定的 id
+ * */
+export const useSelection = (rowKey: string = "id") => {
+  const isSelected = ref<boolean>(false);
+  const selectedList = ref<{ [key: string]: any }[]>([]);
+
+  // 当前选中的所有 ids 数组
+  const selectedListIds = computed((): string[] => {
+    let ids: string[] = [];
+    selectedList.value.forEach(item => ids.push(item[rowKey]));
+    return ids;
+  });
+
+  /**
+   * @description 多选操作
+   * @param {Array} rowArr 当前选择的所有数据
+   * @return void
+   */
+  const selectionChange = (rowArr: { [key: string]: any }[]) => {
+    rowArr.length ? (isSelected.value = true) : (isSelected.value = false);
+    selectedList.value = rowArr;
+  };
+
+  return {
+    isSelected,
+    selectedList,
+    selectedListIds,
+    selectionChange
+  };
+};
+```
+
+- **useDownload：**
+
+```ts
+ts代码解读复制代码import { ElNotification } from "element-plus";
+
+/**
+ * @description 接收数据流生成 blob，创建链接，下载文件
+ * @param {Function} api 导出表格的api方法 (必传)
+ * @param {String} tempName 导出的文件名 (必传)
+ * @param {Object} params 导出的参数 (默认{})
+ * @param {Boolean} isNotify 是否有导出消息提示 (默认为 true)
+ * @param {String} fileType 导出的文件格式 (默认为.xlsx)
+ * */
+export const useDownload = async (
+  api: (param: any) => Promise<any>,
+  tempName: string,
+  params: any = {},
+  isNotify: boolean = true,
+  fileType: string = ".xlsx"
+) => {
+  if (isNotify) {
+    ElNotification({
+      title: "温馨提示",
+      message: "如果数据庞大会导致下载缓慢哦，请您耐心等待！",
+      type: "info",
+      duration: 3000
+    });
+  }
+  try {
+    const res = await api(params);
+    const blob = new Blob([res]);
+    // 兼容 edge 不支持 createObjectURL 方法
+    if ("msSaveOrOpenBlob" in navigator) return window.navigator.msSaveOrOpenBlob(blob, tempName + fileType);
+    const blobUrl = window.URL.createObjectURL(blob);
+    const exportFile = document.createElement("a");
+    exportFile.style.display = "none";
+    exportFile.download = `${tempName}${fileType}`;
+    exportFile.href = blobUrl;
+    document.body.appendChild(exportFile);
+    exportFile.click();
+    // 去除下载对 url 的影响
+    document.body.removeChild(exportFile);
+    window.URL.revokeObjectURL(blobUrl);
+  } catch (error) {
+    console.log(error);
+  }
+};
+```
+
+- **useHandleData：**
+
+```ts
+ts代码解读复制代码import { ElMessageBox, ElMessage } from "element-plus";
+import { HandleData } from "./interface";
+
+/**
+ * @description 操作单条数据信息 (二次确认【删除、禁用、启用、重置密码】)
+ * @param {Function} api 操作数据接口的api方法 (必传)
+ * @param {Object} params 携带的操作数据参数 {id,params} (必传)
+ * @param {String} message 提示信息 (必传)
+ * @param {String} confirmType icon类型 (不必传,默认为 warning)
+ * @returns {Promise}
+ */
+export const useHandleData = (
+  api: (params: any) => Promise<any>,
+  params: any = {},
+  message: string,
+  confirmType: HandleData.MessageType = "warning"
+) => {
+  return new Promise((resolve, reject) => {
+    ElMessageBox.confirm(`是否${message}?`, "温馨提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: confirmType,
+      draggable: true
+    }).then(async () => {
+      const res = await api(params);
+      if (!res) return reject(false);
+      ElMessage({
+        type: "success",
+        message: `${message}成功!`
+      });
+      resolve(true);
+    });
+  });
+};
+```
+
+### 2、页面使用 QueryTable 组件：
+
+#### 2.1 基础页面使用
+
+```html
+<template>
+  <div class="table-box">
+    <query-table
+      ref="proTable"
+      :request-auto="false"
+      :column-config="columnConfig"
+      :table-config="tableConfigOptions"
+      :request-api="getTableList"
+      :init-param="initParam"
+      :data-callback="dataCallback"
+      @drag-sort="sortTable"
+    >
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader="scope">
+        <el-button @click="removeData(scope)">自定义按钮</el-button>
+      </template>
+      <!-- Expand -->
+      <template #expand="scope">{{ scope.row }}</template>
+      <template #usernameHeader="scope">
+        <el-button type="primary" @click="ElMessage.success('我是通过作用域插槽渲染的表头')">
+          {{ scope.column.label }}
+        </el-button>
+      </template>
+      <!-- createTime -->
+      <template #createTime="scope">
+        <el-button type="primary" link @click="ElMessage.success('我是通过作用域插槽渲染的内容')">
+          {{ scope.row.createTime }}
+        </el-button>
+      </template>
+    </query-table>
+    <dialogForm ref="dialogFormRef" />
+  </div>
+</template>
+
+<script setup lang="tsx" name="UseQueryTable">
+  // import { ref, reactive } from 'vue'
+  import { ElMessage } from 'element-plus'
+  import { ProTableInstance, TableConfigProps } from '@/components/QueryTable/interface'
+  import { getUserList, getUserGender, getUserStatus } from '@/api/modules/user'
+  import QueryTable from '@/components/QueryTable/index.vue'
+  import { genderType } from '@/utils/dict'
+  import dialogForm from './dialogForm.vue'
+
+  const dialogFormRef = ref()
+
+  // ProTable 实例
+  const proTable = ref<ProTableInstance>()
+
+  // 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
+  const initParam = reactive({ type: 1 })
+  // dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
+  // 或者直接去 hooks/useQueryTable.ts 文件中把字段改为你后端对应的就行
+  const dataCallback = (data: any) => {
+    return {
+      list: data.list,
+      total: data.total
+    }
+  }
+
+  // 模拟远程加载性别搜索框数据
+  const loading = ref(false)
+  const filterGenderEnum = ref<typeof genderType>([])
+  const remoteMethod = (query: string) => {
+    filterGenderEnum.value = []
+    if (!query) return
+    loading.value = true
+    setTimeout(() => {
+      loading.value = false
+      filterGenderEnum.value = genderType.filter(item => item.label.includes(query))
+    }, 500)
+  }
+
+  const getTableList = (params: any) => {
+    console.log(params)
+    return getUserList(params)
+  }
+
+  const columnConfig = {
+    layout: 'selection,sort',
+    selectionProps: {
+      fixed: 'left',
+      width: 70
+    },
+    sortProps: {
+      label: 'Sort'
+    }
+  }
+  const tableConfigOptions = reactive<TableConfigProps>({
+    // 查询配置项
+    queryItems: [
+      {
+        prop: 'username',
+        label: '用户姓名',
+        search: { el: 'el-input', tooltip: '我是搜索提示' }
+      },
+      {
+        prop: 'remoteGender',
+        label: '远程性别',
+        enum: filterGenderEnum,
+        search: {
+          el: 'el-select',
+          props: {
+            placeholder: '请输入性别查询',
+            filterable: true,
+            remote: true,
+            reserveKeyword: true,
+            loading,
+            remoteMethod
+          }
+        },
+        render: scope => <>{scope.row.gender === 1 ? '男' : '女'}</>
+      },
+      {
+        prop: 'gender',
+        label: '性别',
+        // 字典数据（本地数据）
+        // enum: genderType,
+        // 字典请求不带参数
+        enum: getUserGender,
+        // 字典请求携带参数
+        // enum: () => getUserGender({ id: 1 }),
+        search: { el: 'el-select', props: { filterable: true } },
+        fieldNames: { label: 'genderLabel', value: 'genderValue' },
+        rules: [{ required: true, message: '性别不能为空', trigger: 'blur' }]
+      },
+      {
+        // 多级 prop
+        prop: 'age',
+        label: '年龄',
+        search: {
+          // 自定义 search 显示内容
+          render: ({ searchParam }) => {
+            return (
+              <div class="flx-center">
+                <el-input vModel_trim={searchParam.minAge} placeholder="最小年龄" />
+                <span class="mr10 ml10">-</span>
+                <el-input vModel_trim={searchParam.maxAge} placeholder="最大年龄" />
+              </div>
+            )
+          }
+        }
+      },
+      { prop: 'idCard', label: '身份证号', search: { el: 'el-input' } },
+      {
+        prop: 'status',
+        label: '用户状态',
+        enum: getUserStatus,
+        search: { el: 'el-tree-select', props: { filterable: true } },
+        fieldNames: { label: 'userLabel', value: 'userStatus' }
+      },
+
+      {
+        prop: 'createTime',
+        label: '创建时间',
+        search: {
+          el: 'el-date-picker',
+          span: 2,
+          props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
+          defaultValue: ['2022-11-12 11:35:00', '2022-12-12 11:35:00']
+        }
+      }
+    ],
+    // 表格头部按钮配置项
+    topList: [
+      {
+        text: '打开弹框',
+        hasPerm: 'add',
+        type: 'primary',
+        fun: () => {
+          dialogFormRef.value.openDialog()
+        }
+      },
+      {
+        text: '导出',
+        hasPerm: 'export',
+        plain: true,
+        fun: () => {
+          console.log('新增')
+          // addDialog({
+          //   title: "用户详情",
+          //   fullscreen: false,
+          //   hideFooter: false,
+          //   showConfirm: false,
+          //   showCancel: false,
+          //   // confirmText: '1232',
+          //   // cancelText: '333',
+          //   contentRenderer: () => <Detail />, //<div>12222</div>,
+          //   props: {
+          //     formInline: {
+          //       user: 123,
+          //       name: "admin"
+          //     }
+          //   },
+          //   width: "50%",
+          //   draggable: true,
+          //   fullscreenIcon: true,
+          //   closeOnClickModal: false,
+          //   beforeSure: (done, { options }) => {
+          //     function chores() {
+          //       message(`您修改了数据`, {
+          //         type: "success"
+          //       });
+          //       done(); // 关闭弹框
+          //     }
+          //     chores();
+          //   }
+          // });
+        }
+      },
+      {
+        text: '批量删除',
+        hasPerm: 'batch-add',
+        type: 'danger',
+        plain: true,
+        fun: scope => {
+          console.log('新建字典', scope)
+        }
+      }
+    ],
+    // 表格配置项
+    columns: [
+      {
+        prop: 'id',
+        label: '用户编号',
+        isShow: false
+      },
+      {
+        prop: 'username',
+        label: '用户名称',
+        width: 150,
+        align: 'left'
+      },
+      {
+        prop: 'avatar',
+        label: '用户头像',
+        isSetting: true,
+        render: scope => {
+          return (
+            <>
+              <img src={scope.row.avatar} alt="" width="50px" height="50px" />
+            </>
+          )
+        }
+      },
+      {
+        prop: 'nickname',
+        label: '用户昵称'
+      },
+      {
+        prop: 'phone',
+        label: '部门'
+      },
+      {
+        prop: 'sex',
+        label: '性别',
+        render: scope => {
+          return (
+            <>
+              <el-tag type={!!scope.row.sex ? 'success' : 'danger'}>{!!scope.row.sex ? '男' : '女'}</el-tag>
+            </>
+          )
+        }
+      },
+      {
+        prop: 'status',
+        label: '用户状态',
+        render: scope => {
+          return (
+            <>
+              <el-tag type={scope.row.status ? 'success' : 'danger'}>{scope.row.status ? '启用' : '禁用'}</el-tag>
+            </>
+          )
+        }
+      },
+      {
+        prop: 'createTime',
+        label: '创建时间',
+        width: 180
+      },
+      {
+        prop: 'operation',
+        label: '操作',
+        fixed: 'right',
+        width: 170,
+        btnLList: [
+          {
+            text: '编辑',
+            hasPerm: 'table-edit',
+            fun: (row: any) => {
+              console.log(row)
+            }
+          },
+          {
+            id: 'delete',
+            text: '删除',
+            type: 'danger',
+            fun: (row: any) => {
+              console.log(row)
+              // deleteByIdFn(row.setId);
+            }
+          }
+        ]
+      }
+    ]
+  })
+  // 表格拖拽排序
+  const sortTable = ({ newIndex, oldIndex }: { newIndex?: number; oldIndex?: number }) => {
+    console.log(newIndex, oldIndex)
+    console.log(proTable.value?.tableData)
+    ElMessage.success('修改列表排序成功')
+  }
+
+  const removeData = data => {
+    console.log(data)
+  }
+</script>
+```
+
+```html
+html代码解读复制代码
+<template>
+  <div class="table-box">
+    <ProTable
+      ref="proTable"
+      :columns="columns"
+      :request-api="getTableList"
+      :init-param="initParam"
+      :data-callback="dataCallback"
+      @drag-sort="sortTable"
+    >
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader="scope">
+        <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增用户</el-button>
+        <el-button v-auth="'batchAdd'" type="primary" :icon="Upload" plain @click="batchAdd">批量添加用户</el-button>
+        <el-button v-auth="'export'" type="primary" :icon="Download" plain @click="downloadFile">
+          导出用户数据
+        </el-button>
+        <el-button type="primary" plain @click="toDetail">To 子集详情页面</el-button>
+        <el-button
+          type="danger"
+          :icon="Delete"
+          plain
+          :disabled="!scope.isSelected"
+          @click="batchDelete(scope.selectedListIds)"
+        >
+          批量删除用户
+        </el-button>
+      </template>
+      <!-- Expand -->
+      <template #expand="scope">{{ scope.row }}</template>
+      <!-- usernameHeader -->
+      <template #usernameHeader="scope">
+        <el-button type="primary" @click="ElMessage.success('我是通过作用域插槽渲染的表头')">
+          {{ scope.column.label }}
+        </el-button>
+      </template>
+      <!-- createTime -->
+      <template #createTime="scope">
+        <el-button type="primary" link @click="ElMessage.success('我是通过作用域插槽渲染的内容')">
+          {{ scope.row.createTime }}
+        </el-button>
+      </template>
+      <!-- 表格操作 -->
+      <template #operation="scope">
+        <el-button type="primary" link :icon="View" @click="openDrawer('查看', scope.row)">查看</el-button>
+        <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
+        <el-button type="primary" link :icon="Refresh" @click="resetPass(scope.row)">重置密码</el-button>
+        <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
+      </template>
+    </ProTable>
+    <UserDrawer ref="drawerRef" />
+    <ImportExcel ref="dialogRef" />
+  </div>
+</template>
+
+<script setup lang="tsx" name="useProTable">
+  import { ref, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { User } from '@/api/interface'
+  import { useHandleData } from '@/hooks/useHandleData'
+  import { useDownload } from '@/hooks/useDownload'
+  import { useAuthButtons } from '@/hooks/useAuthButtons'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import ProTable from '@/components/ProTable/index.vue'
+  import ImportExcel from '@/components/ImportExcel/index.vue'
+  import UserDrawer from '@/views/proTable/components/UserDrawer.vue'
+  import { ProTableInstance, ColumnProps, HeaderRenderScope } from '@/components/ProTable/interface'
+  import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
+  import {
+    getUserList,
+    deleteUser,
+    editUser,
+    addUser,
+    changeUserStatus,
+    resetUserPassWord,
+    exportUserInfo,
+    BatchAddUser,
+    getUserStatus,
+    getUserGender
+  } from '@/api/modules/user'
+
+  const router = useRouter()
+
+  // 跳转详情页
+  const toDetail = () => {
+    router.push(`/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`)
+  }
+
+  // ProTable 实例
+  const proTable = ref<ProTableInstance>()
+
+  // 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
+  const initParam = reactive({ type: 1 })
+
+  // dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
+  // 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
+  const dataCallback = (data: any) => {
+    return {
+      list: data.list,
+      total: data.total
+    }
+  }
+
+  // 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
+  // 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
+  const getTableList = (params: any) => {
+    let newParams = JSON.parse(JSON.stringify(params))
+    newParams.createTime && (newParams.startTime = newParams.createTime[0])
+    newParams.createTime && (newParams.endTime = newParams.createTime[1])
+    delete newParams.createTime
+    return getUserList(newParams)
+  }
+
+  // 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
+  const { BUTTONS } = useAuthButtons()
+
+  // 自定义渲染表头（使用tsx语法）
+  const headerRender = (scope: HeaderRenderScope<User.ResUserList>) => {
+    return (
+      <el-button type="primary" onClick={() => ElMessage.success('我是通过 tsx 语法渲染的表头')}>
+        {scope.column.label}
+      </el-button>
+    )
+  }
+
+  // 表格配置项
+  const columns = reactive<ColumnProps<User.ResUserList>[]>([
+    { type: 'selection', fixed: 'left', width: 70 },
+    { type: 'sort', label: 'Sort', width: 80 },
+    { type: 'expand', label: 'Expand', width: 85 },
+    {
+      prop: 'username',
+      label: '用户姓名',
+      search: { el: 'input', tooltip: '我是搜索提示' },
+      render: scope => {
+        return (
+          <el-button type="primary" link onClick={() => ElMessage.success('我是通过 tsx 语法渲染的内容')}>
+            {scope.row.username}
+          </el-button>
+        )
+      }
+    },
+    {
+      prop: 'gender',
+      label: '性别',
+      // 字典数据（本地数据）
+      // enum: genderType,
+      // 字典请求不带参数
+      enum: getUserGender,
+      // 字典请求携带参数
+      // enum: () => getUserGender({ id: 1 }),
+      search: { el: 'select', props: { filterable: true } },
+      fieldNames: { label: 'genderLabel', value: 'genderValue' }
+    },
+    {
+      // 多级 prop
+      prop: 'user.detail.age',
+      label: '年龄',
+      search: {
+        // 自定义 search 显示内容
+        render: ({ searchParam }) => {
+          return (
+            <div class="flx-center">
+              <el-input vModel_trim={searchParam.minAge} placeholder="最小年龄" />
+              <span class="mr10 ml10">-</span>
+              <el-input vModel_trim={searchParam.maxAge} placeholder="最大年龄" />
+            </div>
+          )
+        }
+      }
+    },
+    { prop: 'idCard', label: '身份证号', search: { el: 'input' } },
+    { prop: 'email', label: '邮箱' },
+    { prop: 'address', label: '居住地址' },
+    {
+      prop: 'status',
+      label: '用户状态',
+      enum: getUserStatus,
+      search: { el: 'tree-select', props: { filterable: true } },
+      fieldNames: { label: 'userLabel', value: 'userStatus' },
+      render: scope => {
+        return (
+          <>
+            {BUTTONS.value.status ? (
+              <el-switch
+                model-value={scope.row.status}
+                active-text={scope.row.status ? '启用' : '禁用'}
+                active-value={1}
+                inactive-value={0}
+                onClick={() => changeStatus(scope.row)}
+              />
+            ) : (
+              <el-tag type={scope.row.status ? 'success' : 'danger'}>{scope.row.status ? '启用' : '禁用'}</el-tag>
+            )}
+          </>
+        )
+      }
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      headerRender,
+      width: 180,
+      search: {
+        el: 'date-picker',
+        span: 2,
+        props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
+        defaultValue: ['2022-11-12 11:35:00', '2022-12-12 11:35:00']
+      }
+    },
+    { prop: 'operation', label: '操作', fixed: 'right', width: 330 }
+  ])
+
+  // 表格拖拽排序
+  const sortTable = ({ newIndex, oldIndex }: { newIndex?: number; oldIndex?: number }) => {
+    console.log(newIndex, oldIndex)
+    console.log(proTable.value?.tableData)
+    ElMessage.success('修改列表排序成功')
+  }
+
+  // 删除用户信息
+  const deleteAccount = async (params: User.ResUserList) => {
+    await useHandleData(deleteUser, { id: [params.id] }, `删除【${params.username}】用户`)
+    proTable.value?.getTableList()
+  }
+
+  // 批量删除用户信息
+  const batchDelete = async (id: string[]) => {
+    await useHandleData(deleteUser, { id }, '删除所选用户信息')
+    proTable.value?.clearSelection()
+    proTable.value?.getTableList()
+  }
+
+  // 重置用户密码
+  const resetPass = async (params: User.ResUserList) => {
+    await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
+    proTable.value?.getTableList()
+  }
+
+  // 切换用户状态
+  const changeStatus = async (row: User.ResUserList) => {
+    await useHandleData(
+      changeUserStatus,
+      { id: row.id, status: row.status == 1 ? 0 : 1 },
+      `切换【${row.username}】用户状态`
+    )
+    proTable.value?.getTableList()
+  }
+
+  // 导出用户列表
+  const downloadFile = async () => {
+    ElMessageBox.confirm('确认导出用户数据?', '温馨提示', { type: 'warning' }).then(() =>
+      useDownload(exportUserInfo, '用户列表', proTable.value?.searchParam)
+    )
+  }
+
+  // 批量添加用户
+  const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
+  const batchAdd = () => {
+    const params = {
+      title: '用户',
+      tempApi: exportUserInfo,
+      importApi: BatchAddUser,
+      getTableList: proTable.value?.getTableList
+    }
+    dialogRef.value?.acceptParams(params)
+  }
+
+  // 打开 drawer(新增、查看、编辑)
+  const drawerRef = ref<InstanceType<typeof UserDrawer> | null>(null)
+  const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
+    const params = {
+      title,
+      isView: title === '查看',
+      row: { ...row },
+      api: title === '新增' ? addUser : title === '编辑' ? editUser : undefined,
+      getTableList: proTable.value?.getTableList
+    }
+    drawerRef.value?.acceptParams(params)
+  }
+</script>
+```
+
+#### 2.2 页面使用
+
+```html
+<template>
+  <div class="table-box">
+    <query-table
+      ref="proTable"
+      title="用户列表"
+      highlight-current-row
+      :column-config="columnConfig"
+      :table-config="tableConfigOptions"
+      :request-api="getUserList"
+      :row-class-name="tableRowClassName"
+      :span-method="objectSpanMethod"
+      :show-summary="true"
+      :summary-method="getSummaries"
+      @row-click="rowClick"
+    >
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader="scope">
+        <el-button type="primary" @click="proTable?.element?.toggleAllSelection">全选 / 全不选</el-button>
+        <el-button type="primary" plain @click="setCurrent">选中第五行</el-button>
+        <el-button type="danger" plain :disabled="!scope.isSelected" @click="batchDelete(scope.selectedListIds)">
+          批量删除用户
+        </el-button>
+      </template>
+      <!-- Expand -->
+      <template #expand="scope">{{ scope.row }}</template>
+      <!-- 表格操作 -->
+      <template #operation="scope">
+        <el-button type="primary" link :icon="Refresh" @click="resetPass(scope.row)">重置密码</el-button>
+        <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
+      </template>
+      <template #append>
+        <span style="color: var(--el-color-primary)">
+          <div style="height: 30px; line-height: 30px; background: #f3d2db">
+            我是插入在表格最后的内容。若表格有合计行，该内容会位于合计行之上。
+          </div>
+        </span>
+      </template>
+    </query-table>
+  </div>
+</template>
+
+<script setup lang="tsx" name="complexProTable">
+  // import { reactive, ref } from 'vue'
+  import { ElMessage } from 'element-plus'
+  import { User } from '@/api/interface'
+  import { useHandleData } from '@/hooks/useHandleData'
+  import QueryTable from '@/components/QueryTable/index.vue'
+  import { CirclePlus, Pointer, Delete, Refresh } from '@element-plus/icons-vue'
+  import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
+  import { ProTableInstance, HeaderRenderScope, TableConfigProps } from '@/components/QueryTable/interface'
+  import { getUserList, deleteUser, resetUserPassWord, getUserStatus, getUserGender } from '@/api/modules/user'
+
+  // ProTable 实例
+  const proTable = ref<ProTableInstance>()
+
+  // 自定义渲染表头（使用tsx语法）
+  const headerRender = (scope: HeaderRenderScope<User.ResUserList>) => {
+    return (
+      <el-button type="primary" onClick={() => ElMessage.success('我是通过 tsx 语法渲染的表头')}>
+        {scope.column.label}
+      </el-button>
+    )
+  }
+  const columnConfig = {
+    layout: 'selection,expand,radio,index,sort',
+    selectionProps: {},
+    radioProps: {
+      label: 'Radio'
+    },
+    indexProps: {
+      label: '#'
+    },
+    expandProps: {
+      label: 'Expand'
+    },
+    sortProps: {
+      label: 'Sort'
+    }
+  }
+  const tableConfigOptions = reactive<TableConfigProps>({
+    queryItems: [
+      {
+        prop: 'username',
+        label: '用户姓名',
+        search: { el: 'el-input', tooltip: '我是搜索提示' }
+      },
+      {
+        prop: 'sliders',
+        label: '开关',
+        search: { el: 'el-slider', defaultValue: 20 }
+      },
+      {
+        prop: 'open',
+        label: '开关',
+        search: { el: 'el-switch', defaultValue: false }
+      }
+    ],
+    // 表格头部按钮配置项
+    topList: [
+      {
+        text: '新增',
+        hasPerm: 'add',
+        type: 'primary',
+        fun: () => {
+          console.log('新建字典')
+        }
+      },
+      {
+        text: '导出',
+        hasPerm: 'export',
+        plain: true,
+        fun: () => {
+          console.log('新增')
+        }
+      },
+      {
+        text: '批量删除',
+        hasPerm: 'batch-add',
+        // icon: 'delete',
+        type: 'danger',
+        plain: true,
+        fun: scope => {
+          console.log('新建字典', scope)
+        }
+      }
+    ],
+    columns: [
+      {
+        prop: 'base',
+        label: '基本信息',
+        // isSetting: true,
+        headerRender,
+        _children: [
+          { prop: 'username', label: '用户姓名用户姓名用户姓名', width: 110 },
+          { prop: 'user.detail.age', label: '年龄', width: 100 },
+          {
+            prop: 'gender',
+            label: '性别',
+            width: 100,
+            enum: getUserGender,
+            fieldNames: { label: 'genderLabel', value: 'genderValue' }
+          },
+          {
+            prop: 'details',
+            label: '详细资料',
+            _children: [
+              { prop: 'idCard', label: '身份证号' },
+              { prop: 'email', label: '邮箱' },
+              { prop: 'address', label: '居住地址' }
+            ]
+          }
+        ]
+      },
+      {
+        prop: 'status',
+        label: '用户状态',
+        // isSetting: true,
+        tag: true,
+        enum: getUserStatus,
+        fieldNames: { label: 'userLabel', value: 'userStatus' }
+      },
+      { prop: 'createTime', label: '创建时间', width: 200 },
+      { prop: 'operation', label: '操作', fixed: 'right', width: 230 }
+    ]
+  })
+  // 表格配置项
+  /* const columns = reactive<ColumnProps<User.ResUserList>[]>([
+  { type: 'selection', width: 80 },
+  { type: 'index', label: '#', width: 80 },
+  { type: 'expand', label: 'Expand', width: 100 },
+  {
+    prop: 'base',
+    label: '基本信息',
+    headerRender,
+    _children: [
+      { prop: 'username', label: '用户姓名', width: 110 },
+      { prop: 'user.detail.age', label: '年龄', width: 100 },
+      {
+        prop: 'gender',
+        label: '性别',
+        width: 100,
+        enum: getUserGender,
+        fieldNames: { label: 'genderLabel', value: 'genderValue' }
+      },
+      {
+        prop: 'details',
+        label: '详细资料',
+        _children: [
+          { prop: 'idCard', label: '身份证号' },
+          { prop: 'email', label: '邮箱' },
+          { prop: 'address', label: '居住地址' }
+        ]
+      }
+    ]
+  },
+  {
+    prop: 'status',
+    label: '用户状态',
+    tag: true,
+    enum: getUserStatus,
+    fieldNames: { label: 'userLabel', value: 'userStatus' }
+  },
+  { prop: 'createTime', label: '创建时间', width: 200 },
+  { prop: 'operation', label: '操作', fixed: 'right', width: 230 }
+]) */
+
+  // 选择行
+  const setCurrent = () => {
+    proTable.value?.element?.setCurrentRow(proTable.value?.tableData[4])
+    proTable.value?.element?.toggleRowSelection(proTable.value?.tableData[4], true)
+  }
+
+  // 表尾合计行（自行根据条件计算）
+  interface SummaryMethodProps<T = User.ResUserList> {
+    columns: TableColumnCtx<T>[]
+    data: T[]
+  }
+  const getSummaries = (param: SummaryMethodProps) => {
+    const { columns } = param
+    const sums: string[] = []
+    columns.forEach((column, index) => {
+      if (index === 0) return (sums[index] = '合计')
+      else sums[index] = 'N/A'
+    })
+    return sums
+  }
+
+  // 列合并
+  interface SpanMethodProps {
+    row: User.ResUserList
+    column: TableColumnCtx<User.ResUserList>
+    rowIndex: number
+    columnIndex: number
+  }
+  const objectSpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
+    if (columnIndex === 3) {
+      if (rowIndex % 2 === 0) return { rowspan: 2, colspan: 1 }
+      else return { rowspan: 0, colspan: 0 }
+    }
+  }
+
+  // 设置列样式
+  const tableRowClassName = ({ rowIndex }: { row: User.ResUserList; rowIndex: number }) => {
+    if (rowIndex === 2) return 'warning-row'
+    if (rowIndex === 6) return 'success-row'
+    return ''
+  }
+
+  // 单击行
+  const rowClick = (row: User.ResUserList, column: TableColumnCtx<User.ResUserList>) => {
+    if (column.property == 'radio' || column.property == 'operation') return
+    console.log(row)
+    ElMessage.success('当前行被点击了！')
+  }
+
+  // 删除用户信息
+  const deleteAccount = async (params: User.ResUserList) => {
+    await useHandleData(deleteUser, { id: [params.id] }, `删除【${params.username}】用户`)
+    proTable.value?.getTableList()
+  }
+
+  // 批量删除用户信息
+  const batchDelete = async (id: string[]) => {
+    await useHandleData(deleteUser, { id }, '删除所选用户信息')
+    proTable.value?.clearSelection()
+    proTable.value?.getTableList()
+  }
+
+  // 重置用户密码
+  const resetPass = async (params: User.ResUserList) => {
+    await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
+    proTable.value?.getTableList()
+  }
+</script>
+
+<style lang="scss" scoped>
+  .el-table .warning-row,
+  .el-table .warning-row .el-table-fixed-column--right,
+  .el-table .warning-row .el-table-fixed-column--left {
+    background-color: var(--el-color-warning-light-9);
+  }
+  .el-table .success-row,
+  .el-table .success-row .el-table-fixed-column--right,
+  .el-table .success-row .el-table-fixed-column--left {
+    background-color: var(--el-color-success-light-9);
+  }
+</style>
+```