@yidun/antd-super-table 0.1.8 → 0.1.10

package/dist/interface.d.ts

@@ -144,6 +144,9 @@ export interface SuperTableColumn {
   /** 表格内容解析用到的组件对应的props */
   props?: Record<string, any> | ((row: SuperTableDataItem, index: number) => Record<string, any>)
 
+  /** 自定义单元格插槽名，命中后优先使用具名插槽渲染 */
+  slotName?: string
+
   /** 是否可复制 */
   copyable?: boolean
 
@@ -428,6 +431,9 @@ export interface SuperTableSlots {
   tableFoot?: () => any
   /** 展开行内容插槽 */
   expandedRowRender?: (props: { record: any }) => any
+
+  /** 自定义单元格具名插槽 */
+  [slotName: string]: ((props?: Record<string, any>) => any) | undefined
 }
 
 /**

package/dist/utils/index.d.ts

@@ -52,6 +52,7 @@ export declare const initTableColumns: (columns: SuperTableColumn[]) => {
     content?: string | ((row: import("..").SuperTableDataItem, index: number) => any);
     tooltip?: string | boolean | ((row: import("..").SuperTableDataItem, index: number) => string);
     props?: Record<string, any> | ((row: import("..").SuperTableDataItem, index: number) => Record<string, any>);
+    slotName?: string;
     copyable?: boolean;
     fixed?: import("..").SuperTableColumnFixedType;
     sorter?: boolean | ((a: import("..").SuperTableDataItem, b: import("..").SuperTableDataItem) => number);

package/example/index.vue

@@ -14,6 +14,30 @@ const tableRef = ref<InstanceType<typeof SuperTable>>()
 // 查询条件配置 - 改为响应式
 const formItems = ref<any[]>(createFormItems())
 
+function onTableChange(pagination: any, filters: any, sorter: any, extra: any) {
+  // sorter 可能是对象或数组（多列排序）
+  const sorters = Array.isArray(sorter) ? sorter : [sorter]
+  const activeSorters = sorters.filter(s => s?.order)
+  if (activeSorters.length > 0) {
+    console.log('sort-change:', {
+      sorter,
+      activeSorters,
+      pagination,
+      filters,
+      extra,
+    })
+  }
+}
+
+function onResizeColumn(width: number, column: any) {
+  console.log('resize-column:', {
+    width,
+    key: column?.key,
+    title: column?.title,
+    column,
+  })
+}
+
 // 表头配置
 const tableColumns: any = createTableColumns({
   onDelete,
@@ -161,7 +185,7 @@ const handleClearCache = () => {
     content: '确定要清空所有 localStorage 缓存吗？此操作不可恢复。',
     onOk: () => {
       try {
-        localStorage.clear()
+        window.localStorage.clear()
         Modal.success({
           title: '成功',
           content: '缓存已清空，页面将自动刷新',
@@ -380,6 +404,8 @@ onMounted(() => {
         },
       }"
       @form-item-change="onFormItemChange"
+      @change="onTableChange"
+      @resize-column="onResizeColumn"
     >
       <template
         v-if="setting.showSceneAddonBefore"
@@ -417,6 +443,29 @@ onMounted(() => {
       >
         <div :class="$style.block">tableFoot</div>
       </template>
+      <template #customBodyCell="{ record, index }">
+        <div :class="$style.customCellList">
+          <div :class="$style.customCellHeader">
+            <a-tag color="purple">插槽</a-tag>
+            <span :class="$style.customCellTitle">第 {{ index + 1 }} 行</span>
+          </div>
+          <div :class="$style.customCellItem">
+            <a-badge status="processing" />
+            <span :class="$style.customCellText">{{ record?.text || '-' }}</span>
+            <a-button
+              type="link"
+              size="small"
+            >
+              复制
+            </a-button>
+          </div>
+          <div :class="$style.customCellItem">
+            <a-badge status="success" />
+            <span :class="$style.customCellText">元素 B ⭐</span>
+            <a-tag color="green">生效</a-tag>
+          </div>
+        </div>
+      </template>
     </super-table>
   </div>
 </template>
@@ -438,4 +487,32 @@ onMounted(() => {
 .form {
   padding: 16px;
 }
+
+.customCellList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.customCellHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.customCellTitle {
+  color: #595959;
+  font-size: 12px;
+}
+
+.customCellItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.customCellText {
+  flex: 1;
+  color: #262626;
+}
 </style>

package/example/tableColumns.ts

@@ -17,6 +17,9 @@ export const createTableColumns = (options: {
       content: 'id',
       width: 80,
       fixed: 'left',
+      // column 示例：开启 antd 排序（配合 example/index.vue 的 @change 打印 sort 日志）
+      sorter: (a: any, b: any) => Number(a?.id ?? 0) - Number(b?.id ?? 0),
+      sortDirections: ['ascend', 'descend'],
     },
     {
       key: 'index',
@@ -132,6 +135,14 @@ export const createTableColumns = (options: {
         },
       },
     },
+    {
+      key: 'customSlotCell',
+      title: '自定义插槽',
+      type: 'text',
+      content: 'text',
+      width: 180,
+      slotName: 'customBodyCell',
+    },
     {
       key: 'status',
       title: '状态',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yidun/antd-super-table",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "type": "module",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",