@yidun/antd-super-table 0.1.9 → 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

@@ -443,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>
@@ -464,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

@@ -135,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.9",
+  "version": "0.1.10",
   "type": "module",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",