@tmagic/table 1.5.7 → 1.5.9

package/dist/tmagic-table.js

@@ -256,14 +256,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const formatter = (item, row) => {
+const formatter = (item, row, data) => {
   if (!item.prop) return "";
   if (item.formatter) {
     if (item.formatter === "datetime") {
       item.formatter = (value) => datetimeFormatter(value);
     }
     try {
-      return item.formatter(row[item.prop], row);
+      return item.formatter(row[item.prop], row, data);
     } catch (e) {
       return row[item.prop];
     }
@@ -311,7 +311,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     {
                       default: withCtx(() => [
                         createTextVNode(
-                          toDisplayString(_ctx.config.text || unref(formatter)(_ctx.config, scope.row)),
+                          toDisplayString(_ctx.config.text || unref(formatter)(_ctx.config, scope.row, { index: scope.$index })),
                           1
                           /* TEXT */
                         )
@@ -346,11 +346,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1 = ["innerHTML"];
-const _hoisted_2 = ["href"];
-const _hoisted_3 = ["src"];
-const _hoisted_4 = ["href"];
-const _hoisted_5 = ["innerHTML"];
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = ["innerHTML"];
+const _hoisted_3 = ["href"];
+const _hoisted_4 = ["src"];
+const _hoisted_5 = ["href"];
+const _hoisted_6 = ["innerHTML"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MTableColumn"
@@ -373,8 +374,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         prop: _ctx.config.prop
       }, {
         default: withCtx((scope) => [
-          _ctx.config.type && _ctx.editState[scope.$index] ? (openBlock(), createBlock(unref(TMagicForm), {
-            key: 0,
+          _ctx.config.type === "index" ? (openBlock(), createElementBlock(
+            "div",
+            _hoisted_1,
+            toDisplayString(_ctx.config.pageIndex && _ctx.config.pageSize ? _ctx.config.pageIndex * _ctx.config.pageSize + scope.$index + 1 : scope.$index + 1),
+            1
+            /* TEXT */
+          )) : _ctx.config.type && _ctx.editState[scope.$index] ? (openBlock(), createBlock(unref(TMagicForm), {
+            key: 1,
             "label-width": "0",
             model: _ctx.editState[scope.$index]
           }, {
@@ -390,36 +397,36 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             _: 2
             /* DYNAMIC */
           }, 1032, ["model"])) : _ctx.config.action === "actionLink" && _ctx.config.prop ? (openBlock(), createBlock(unref(TMagicButton), {
-            key: 1,
+            key: 2,
             link: "",
             type: "primary",
             onClick: ($event) => _ctx.config.handler?.(scope.row)
           }, {
             default: withCtx(() => [
               createElementVNode("span", {
-                innerHTML: unref(formatter)(_ctx.config, scope.row)
-              }, null, 8, _hoisted_1)
+                innerHTML: unref(formatter)(_ctx.config, scope.row, { index: scope.$index })
+              }, null, 8, _hoisted_2)
             ]),
             _: 2
             /* DYNAMIC */
           }, 1032, ["onClick"])) : _ctx.config.action === "img" && _ctx.config.prop ? (openBlock(), createElementBlock("a", {
-            key: 2,
+            key: 3,
             target: "_blank",
             href: scope.row[_ctx.config.prop]
           }, [
             createElementVNode("img", {
               src: scope.row[_ctx.config.prop],
               height: "50"
-            }, null, 8, _hoisted_3)
-          ], 8, _hoisted_2)) : _ctx.config.action === "link" && _ctx.config.prop ? (openBlock(), createElementBlock("a", {
-            key: 3,
+            }, null, 8, _hoisted_4)
+          ], 8, _hoisted_3)) : _ctx.config.action === "link" && _ctx.config.prop ? (openBlock(), createElementBlock("a", {
+            key: 4,
             target: "_blank",
             href: scope.row[_ctx.config.prop],
             class: "keep-all"
-          }, toDisplayString(scope.row[_ctx.config.prop]), 9, _hoisted_4)) : _ctx.config.action === "tip" ? (openBlock(), createBlock(
+          }, toDisplayString(scope.row[_ctx.config.prop]), 9, _hoisted_5)) : _ctx.config.action === "tip" ? (openBlock(), createBlock(
             _component_el_tooltip,
             {
-              key: 4,
+              key: 5,
               placement: "left"
             },
             {
@@ -427,7 +434,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 createElementVNode(
                   "div",
                   null,
-                  toDisplayString(unref(formatter)(_ctx.config, scope.row)),
+                  toDisplayString(unref(formatter)(_ctx.config, scope.row, { index: scope.$index })),
                   1
                   /* TEXT */
                 )
@@ -454,13 +461,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             1024
             /* DYNAMIC_SLOTS */
           )) : _ctx.config.action === "tag" && _ctx.config.prop ? (openBlock(), createBlock(unref(TMagicTag), {
-            key: 5,
+            key: 6,
             type: typeof _ctx.config.type === "function" ? _ctx.config.type(scope.row[_ctx.config.prop], scope.row) : _ctx.config.type,
             "close-transition": ""
           }, {
             default: withCtx(() => [
               createTextVNode(
-                toDisplayString(unref(formatter)(_ctx.config, scope.row)),
+                toDisplayString(unref(formatter)(_ctx.config, scope.row, { index: scope.$index })),
                 1
                 /* TEXT */
               )
@@ -468,9 +475,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             _: 2
             /* DYNAMIC */
           }, 1032, ["type"])) : (openBlock(), createElementBlock("div", {
-            key: 6,
-            innerHTML: unref(formatter)(_ctx.config, scope.row)
-          }, null, 8, _hoisted_5))
+            key: 7,
+            innerHTML: unref(formatter)(_ctx.config, scope.row, { index: scope.$index })
+          }, null, 8, _hoisted_6))
         ]),
         _: 1
         /* STABLE */

package/dist/tmagic-table.umd.cjs

@@ -2511,14 +2511,14 @@
     }
   });
 
-  const formatter = (item, row) => {
+  const formatter = (item, row, data) => {
     if (!item.prop) return "";
     if (item.formatter) {
       if (item.formatter === "datetime") {
         item.formatter = (value) => form.datetimeFormatter(value);
       }
       try {
-        return item.formatter(row[item.prop], row);
+        return item.formatter(row[item.prop], row, data);
       } catch (e) {
         return row[item.prop];
       }
@@ -2566,7 +2566,7 @@
                       {
                         default: vue.withCtx(() => [
                           vue.createTextVNode(
-                            vue.toDisplayString(_ctx.config.text || vue.unref(formatter)(_ctx.config, scope.row)),
+                            vue.toDisplayString(_ctx.config.text || vue.unref(formatter)(_ctx.config, scope.row, { index: scope.$index })),
                             1
                             /* TEXT */
                           )
@@ -2601,11 +2601,12 @@
     }
   });
 
-  const _hoisted_1 = ["innerHTML"];
-  const _hoisted_2 = ["href"];
-  const _hoisted_3 = ["src"];
-  const _hoisted_4 = ["href"];
-  const _hoisted_5 = ["innerHTML"];
+  const _hoisted_1 = { key: 0 };
+  const _hoisted_2 = ["innerHTML"];
+  const _hoisted_3 = ["href"];
+  const _hoisted_4 = ["src"];
+  const _hoisted_5 = ["href"];
+  const _hoisted_6 = ["innerHTML"];
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MTableColumn"
@@ -2628,8 +2629,14 @@
           prop: _ctx.config.prop
         }, {
           default: vue.withCtx((scope) => [
-            _ctx.config.type && _ctx.editState[scope.$index] ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicForm), {
-              key: 0,
+            _ctx.config.type === "index" ? (vue.openBlock(), vue.createElementBlock(
+              "div",
+              _hoisted_1,
+              vue.toDisplayString(_ctx.config.pageIndex && _ctx.config.pageSize ? _ctx.config.pageIndex * _ctx.config.pageSize + scope.$index + 1 : scope.$index + 1),
+              1
+              /* TEXT */
+            )) : _ctx.config.type && _ctx.editState[scope.$index] ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicForm), {
+              key: 1,
               "label-width": "0",
               model: _ctx.editState[scope.$index]
             }, {
@@ -2645,36 +2652,36 @@
               _: 2
               /* DYNAMIC */
             }, 1032, ["model"])) : _ctx.config.action === "actionLink" && _ctx.config.prop ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-              key: 1,
+              key: 2,
               link: "",
               type: "primary",
               onClick: ($event) => _ctx.config.handler?.(scope.row)
             }, {
               default: vue.withCtx(() => [
                 vue.createElementVNode("span", {
-                  innerHTML: vue.unref(formatter)(_ctx.config, scope.row)
-                }, null, 8, _hoisted_1)
+                  innerHTML: vue.unref(formatter)(_ctx.config, scope.row, { index: scope.$index })
+                }, null, 8, _hoisted_2)
               ]),
               _: 2
               /* DYNAMIC */
             }, 1032, ["onClick"])) : _ctx.config.action === "img" && _ctx.config.prop ? (vue.openBlock(), vue.createElementBlock("a", {
-              key: 2,
+              key: 3,
               target: "_blank",
               href: scope.row[_ctx.config.prop]
             }, [
               vue.createElementVNode("img", {
                 src: scope.row[_ctx.config.prop],
                 height: "50"
-              }, null, 8, _hoisted_3)
-            ], 8, _hoisted_2)) : _ctx.config.action === "link" && _ctx.config.prop ? (vue.openBlock(), vue.createElementBlock("a", {
-              key: 3,
+              }, null, 8, _hoisted_4)
+            ], 8, _hoisted_3)) : _ctx.config.action === "link" && _ctx.config.prop ? (vue.openBlock(), vue.createElementBlock("a", {
+              key: 4,
               target: "_blank",
               href: scope.row[_ctx.config.prop],
               class: "keep-all"
-            }, vue.toDisplayString(scope.row[_ctx.config.prop]), 9, _hoisted_4)) : _ctx.config.action === "tip" ? (vue.openBlock(), vue.createBlock(
+            }, vue.toDisplayString(scope.row[_ctx.config.prop]), 9, _hoisted_5)) : _ctx.config.action === "tip" ? (vue.openBlock(), vue.createBlock(
               _component_el_tooltip,
               {
-                key: 4,
+                key: 5,
                 placement: "left"
               },
               {
@@ -2682,7 +2689,7 @@
                   vue.createElementVNode(
                     "div",
                     null,
-                    vue.toDisplayString(vue.unref(formatter)(_ctx.config, scope.row)),
+                    vue.toDisplayString(vue.unref(formatter)(_ctx.config, scope.row, { index: scope.$index })),
                     1
                     /* TEXT */
                   )
@@ -2709,13 +2716,13 @@
               1024
               /* DYNAMIC_SLOTS */
             )) : _ctx.config.action === "tag" && _ctx.config.prop ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTag), {
-              key: 5,
+              key: 6,
               type: typeof _ctx.config.type === "function" ? _ctx.config.type(scope.row[_ctx.config.prop], scope.row) : _ctx.config.type,
               "close-transition": ""
             }, {
               default: vue.withCtx(() => [
                 vue.createTextVNode(
-                  vue.toDisplayString(vue.unref(formatter)(_ctx.config, scope.row)),
+                  vue.toDisplayString(vue.unref(formatter)(_ctx.config, scope.row, { index: scope.$index })),
                   1
                   /* TEXT */
                 )
@@ -2723,9 +2730,9 @@
               _: 2
               /* DYNAMIC */
             }, 1032, ["type"])) : (vue.openBlock(), vue.createElementBlock("div", {
-              key: 6,
-              innerHTML: vue.unref(formatter)(_ctx.config, scope.row)
-            }, null, 8, _hoisted_5))
+              key: 7,
+              innerHTML: vue.unref(formatter)(_ctx.config, scope.row, { index: scope.$index })
+            }, null, 8, _hoisted_6))
           ]),
           _: 1
           /* STABLE */

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.7",
+  "version": "1.5.9",
   "name": "@tmagic/table",
   "type": "module",
   "sideEffects": [
@@ -44,8 +44,8 @@
   "peerDependencies": {
     "vue": ">=3.5.0",
     "typescript": "*",
-    "@tmagic/design": "1.5.7",
-    "@tmagic/form": "1.5.7"
+    "@tmagic/design": "1.5.9",
+    "@tmagic/form": "1.5.9"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/PopoverColumn.vue

@@ -16,7 +16,9 @@
           :data="(config.prop && scope.row[config.prop]) || []"
         ></MTable>
         <template #reference>
-          <TMagicButton link type="primary"> {{ config.text || formatter(config, scope.row) }}</TMagicButton>
+          <TMagicButton link type="primary">
+            {{ config.text || formatter(config, scope.row, { index: scope.$index }) }}</TMagicButton
+          >
         </template>
       </TMagicPopover>
     </template>

package/src/TextColumn.vue

@@ -8,7 +8,12 @@
     :prop="config.prop"
   >
     <template v-slot="scope">
-      <TMagicForm v-if="config.type && editState[scope.$index]" label-width="0" :model="editState[scope.$index]">
+      <div v-if="config.type === 'index'">
+        {{
+          config.pageIndex && config.pageSize ? config.pageIndex * config.pageSize + scope.$index + 1 : scope.$index + 1
+        }}
+      </div>
+      <TMagicForm v-else-if="config.type && editState[scope.$index]" label-width="0" :model="editState[scope.$index]">
         <m-form-container
           :prop="config.prop"
           :rules="config.rules"
@@ -24,7 +29,7 @@
         type="primary"
         @click="config.handler?.(scope.row)"
       >
-        <span v-html="formatter(config, scope.row)"></span>
+        <span v-html="formatter(config, scope.row, { index: scope.$index })"></span>
       </TMagicButton>
 
       <a v-else-if="config.action === 'img' && config.prop" target="_blank" :href="scope.row[config.prop]"
@@ -41,7 +46,7 @@
 
       <el-tooltip v-else-if="config.action === 'tip'" placement="left">
         <template #content>
-          <div>{{ formatter(config, scope.row) }}</div>
+          <div>{{ formatter(config, scope.row, { index: scope.$index }) }}</div>
         </template>
         <TMagicButton link type="primary">{{ config.buttonText || '扩展配置' }}</TMagicButton>
       </el-tooltip>
@@ -50,9 +55,9 @@
         v-else-if="config.action === 'tag' && config.prop"
         :type="typeof config.type === 'function' ? config.type(scope.row[config.prop], scope.row) : config.type"
         close-transition
-        >{{ formatter(config, scope.row) }}</TMagicTag
+        >{{ formatter(config, scope.row, { index: scope.$index }) }}</TMagicTag
       >
-      <div v-else v-html="formatter(config, scope.row)"></div>
+      <div v-else v-html="formatter(config, scope.row, { index: scope.$index })"></div>
     </template>
   </TMagicTableColumn>
 </template>

package/src/schema.ts

@@ -34,6 +34,8 @@ export interface ColumnActionConfig {
 }
 
 export interface ColumnConfig<T = any> {
+  pageIndex?: number;
+  pageSize?: number;
   form?: FormConfig;
   rules?: any;
   values?: FormValue;
@@ -43,13 +45,13 @@ export interface ColumnConfig<T = any> {
   fixed?: 'left' | 'right' | boolean;
   width?: number | string;
   actions?: ColumnActionConfig[];
-  type?: 'popover' | 'expand' | 'component' | string | ((value: any, row: T) => string);
+  type?: 'popover' | 'expand' | 'component' | 'index' | string | ((value: any, row: T) => string);
   text?: string;
   prop?: string;
   name?: string;
   showHeader?: boolean;
   table?: ColumnConfig[];
-  formatter?: 'datetime' | ((item: any, row: T) => any);
+  formatter?: 'datetime' | ((item: any, row: T, data: { index: number }) => any);
   popover?: {
     placement?:
       | 'auto'

package/src/utils.ts

@@ -20,7 +20,7 @@ import { datetimeFormatter } from '@tmagic/form';
 
 import type { ColumnConfig } from './schema';
 
-export const formatter = (item: ColumnConfig, row: any) => {
+export const formatter = (item: ColumnConfig, row: any, data: { index: number }) => {
   if (!item.prop) return '';
 
   if (item.formatter) {
@@ -29,7 +29,7 @@ export const formatter = (item: ColumnConfig, row: any) => {
       item.formatter = (value: string) => datetimeFormatter(value);
     }
     try {
-      return item.formatter(row[item.prop], row);
+      return item.formatter(row[item.prop], row, data);
     } catch (e) {
       return row[item.prop];
     }

package/types/index.d.ts

@@ -21,6 +21,8 @@ interface ColumnActionConfig {
     }) => Promise<void> | void;
 }
 interface ColumnConfig<T = any> {
+    pageIndex?: number;
+    pageSize?: number;
     form?: FormConfig;
     rules?: any;
     values?: FormValue;
@@ -30,13 +32,15 @@ interface ColumnConfig<T = any> {
     fixed?: 'left' | 'right' | boolean;
     width?: number | string;
     actions?: ColumnActionConfig[];
-    type?: 'popover' | 'expand' | 'component' | string | ((value: any, row: T) => string);
+    type?: 'popover' | 'expand' | 'component' | 'index' | string | ((value: any, row: T) => string);
     text?: string;
     prop?: string;
     name?: string;
     showHeader?: boolean;
     table?: ColumnConfig[];
-    formatter?: 'datetime' | ((item: any, row: T) => any);
+    formatter?: 'datetime' | ((item: any, row: T, data: {
+        index: number;
+    }) => any);
     popover?: {
         placement?: 'auto' | 'auto-start' | 'auto-end' | 'left' | 'right' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
         width?: string | number;
@@ -196,7 +200,9 @@ declare const _default$1: vue.DefineComponent<__VLS_Props, {
     }) | null;
 }, any>;
 
-declare const formatter: (item: ColumnConfig, row: any) => any;
+declare const formatter: (item: ColumnConfig, row: any, data: {
+    index: number;
+}) => any;
 declare const createColumns: (columns: ColumnConfig[]) => ColumnConfig<any>[];
 
 declare const _default: {