feat: 添加filterIconSlot、expandSlot插槽，优化类型

Author: xiaoxian521

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 3.3.0 (2025-07-30)
+
+### 🎫 Feat
+
+- 添加自定义 `filter` 图标插槽 `filterIconSlot`，可在 `template` 中使用
+- 添加展开列的自定义内容插槽 `expandSlot`，可在 `template` 中使用
+
+### 🎫 types
+
+- 优化类型
+
 ## 3.2.1 (2024-08-31)
 
 ### 🐞 Bug fixes

package.json

@@ -64,7 +64,7 @@
     "element-plus": "^2.0.0"
   },
   "dependencies": {
-    "element-plus": "^2.8.0",
+    "element-plus": "^2.10.4",
     "vue": "^3.4.37"
   },
   "devDependencies": {
@@ -73,7 +73,7 @@
     "@commitlint/types": "^18.4.3",
     "@intlify/unplugin-vue-i18n": "^2.0.0",
     "@pureadmin/release": "^1.1.0",
-    "@pureadmin/utils": "^2.0.1",
+    "@pureadmin/utils": "^2.6.2",
     "@rollup/plugin-terser": "^0.4.4",
     "@types/node": "^20.10.5",
     "@vitejs/plugin-vue": "^4.4.1",
@@ -85,8 +85,8 @@
     "prettier": "^3.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^4.3.0",
-    "sass": "^1.69.5",
-    "sass-loader": "^13.3.2",
+    "sass": "^1.89.2",
+    "sass-loader": "^16.0.5",
     "typescript": "^5.3.3",
     "vite": "4.5.1",
     "vite-svg-loader": "^5.1.0",

packages/components/table/index.tsx

@@ -173,6 +173,8 @@ export default defineComponent({
         slot,
         headerRenderer,
         headerSlot,
+        filterIconSlot,
+        expandSlot,
         hide,
         children,
         prop,
@@ -212,36 +214,58 @@ export default defineComponent({
         }
       };
 
-      let scopedSlots = headerRenderer
-        ? {
-            header: (scope: TableColumnScope) => {
-              return (
-                <Renderer
-                  render={headerRenderer}
-                  params={Object.assign(scope, {
-                    index: scope.$index,
-                    props,
-                    attrs
-                  })}
-                ></Renderer>
-              );
-            },
-            ...defaultSlots
-          }
-        : slots?.[headerSlot]
-          ? {
-              header: (scope: TableColumnScope) => {
-                return slots?.[headerSlot]?.(
-                  Object.assign(scope, {
-                    index: scope.$index,
-                    props,
-                    attrs
-                  })
-                );
-              },
-              ...defaultSlots
-            }
-          : defaultSlots;
+      const scopedSlots: { [key: string]: (scope: TableColumnScope) => any } = {
+        ...defaultSlots
+      };
+
+      if (headerRenderer) {
+        scopedSlots.header = (scope: TableColumnScope) => {
+          return (
+            <Renderer
+              render={headerRenderer}
+              params={Object.assign(scope, {
+                index: scope.$index,
+                props,
+                attrs
+              })}
+            />
+          );
+        };
+      } else if (slots?.[headerSlot]) {
+        scopedSlots.header = (scope: TableColumnScope) => {
+          return slots[headerSlot]?.(
+            Object.assign(scope, {
+              index: scope.$index,
+              props,
+              attrs
+            })
+          );
+        };
+      }
+
+      if (slots?.[filterIconSlot]) {
+        scopedSlots["filter-icon"] = (scope: TableColumnScope) => {
+          return slots[filterIconSlot]?.(
+            Object.assign(scope, {
+              index: scope.$index,
+              props,
+              attrs
+            })
+          );
+        };
+      }
+
+      if (slots?.[expandSlot]) {
+        scopedSlots.expand = (scope: TableColumnScope) => {
+          return slots[expandSlot]?.(
+            Object.assign(scope, {
+              index: scope.$index,
+              props,
+              attrs
+            })
+          );
+        };
+      }
 
       if (children?.length > 0) {
         scopedSlots.default = () => children.map(renderColumns);

packages/types/table-column.ts

@@ -102,6 +102,12 @@ export type TableColumn = {
   filterMethod?: FilterMethods;
   /** 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性 */
   filteredValue?: Array<any>;
+  /** 使用 `show-overflow-tooltip` 时自定义 `tooltip` 内容 */
+  tooltipFormatter?: (data: {
+    row: any;
+    column: any;
+    cellValue: any;
+  }) => VNode | string;
 };
 
 /**
@@ -115,6 +121,10 @@ export interface TableColumns extends TableColumn {
   slot?: string;
   /** 自定义表头的内容插槽 */
   headerSlot?: string;
+  /** 自定义 `filter` 图标插槽 */
+  filterIconSlot?: string;
+  /** 展开列的自定义内容插槽 */
+  expandSlot?: string;
   /** 多级表头，内部实现原理：嵌套 `el-table-column` */
   children?: Array<TableColumns>;
   /** 自定义单元格渲染器（`jsx`语法） */

packages/types/table-props.ts

@@ -19,6 +19,7 @@ import type {
   CellCls,
   Sort
 } from "element-plus";
+import type { VNode } from "vue";
 import type { TableOverflowTooltipOptions } from "element-plus/es/components/table/src/util";
 
 /**
@@ -83,14 +84,16 @@ export type TableProps = {
   emptyText?: string;
   /** 是否默认展开所有行，当 `Table` 包含展开行存在或者为树形表格时有效，默认值为 `false` */
   defaultExpandAll?: boolean;
-  /** 可以通过该属性设置 `Table` 目前的展开行，需要设置 `row-key` 属性才能使用，该属性为展开行的 `keys` 数组 */
+  /** 可以通过该属性设置 `Table` 目前的展开行，需要设置 `row-key` 属性才能使用，该属性为展开行的 `keys` 数组。 从 [element-plus](https://element-plus.org/zh-CN/component/table.html#table-%E5%B1%9E%E6%80%A7) 的 `2.10.3` 版本开始，支持使用数字类型的键 */
   expandRowKeys?: any[];
   /** 默认的排序列的 `prop` 和顺序。它的 `prop` 属性指定默认的排序的列，`order` 指定默认排序的顺序，默认值为 `如果 prop 已配置, 同时 order 未配置, 那么 order 默认为升序` */
   defaultSort?: Sort;
   /** `tooltip effect` 属性，默认值为 `dark` */
   tooltipEffect?: Effect;
   /** 溢出 tooltip 的选项 参考 https://element-plus.org/zh-CN/component/tooltip.html#attributes  默认值为 `{ enterable: true, placement: 'top', showArrow: true, hideAfter: 200, popperOptions: { strategy: 'fixed' } }` */
   tooltipOptions?: TableOverflowTooltipOptions;
+  /** 挂载到哪个 `DOM` 元素 */
+  appendFilterPanelTo?: string;
   /** 是否在表尾显示合计行，默认值为 `false` */
   showSummary?: boolean;
   /** 合计行第一列的文本，默认值为 `合计` */
@@ -132,6 +135,18 @@ export type TableProps = {
   scrollbarAlwaysOn?: boolean;
   /** 确保主轴的最小尺寸，以便不超过内容，默认值为 `false` */
   flexible?: boolean;
+  /** `body` 的滚动条的包裹容器 `tabindex` */
+  scrollbarTabindex?: string | number;
+  /** 是否允许拖动最后一列，默认值为 `true` */
+  allowDragLastColumn?: boolean;
+  /** 自定义 `show-overflow-tooltip` 时的 `tooltip` 内容 */
+  tooltipFormatter?: (data: {
+    row: any;
+    column: any;
+    cellValue: any;
+  }) => VNode | string;
+  /** 在折叠后是否在 `DOM` 中保留展开行内容，默认值为 `false` */
+  preserveExpandedContent?: boolean;
 };
 
 /**