feat: 新增插槽参数： 数据在数组中的下标, readme，demo 均已更新

README.md

@@ -41,10 +41,10 @@ npm i vue3-h5-table
           :table-datas="datas"
           @row-click="handleClick"
         >
-        <template #title="item">
+        <template #title="{ item, index}">
             <div  class='title'>{{ item.select }}</div>
         </template>
-        <template #categoryOrAmount="item">
+        <template #categoryOrAmount="{ item, index}">
             <section class="categoryOrAmount">
                 <div>{{ item.category===1?'买入':'卖出' }}</div>
                 <div>{{ item.amount }}</div>

dist/lib/h5-table/components/h5-table-cell.d.ts

@@ -1,6 +1,7 @@
 import { type Slots, type FunctionalComponent } from "vue";
 type PropsType = {
     render?: Function;
+    dataIndex?: any;
     dataItem?: any;
     dataValue: string;
     slotKey: string | undefined;

dist/lib/h5-table/components/h5-table-header.vue.d.ts

@@ -13,17 +13,15 @@ declare const _sfc_main: import("vue").DefineComponent<{
     };
     slots: {
         type: __PropType<Readonly<{
-            [name: string]: import("vue").Slot | undefined;
+            [name: string]: import("vue").Slot<any> | undefined;
         }>>;
         required: true;
     };
     rootValue: {
         type: __PropType<number>;
         required: true;
     };
-}, {
-    titleRef: import("vue").Ref<HTMLElement | null>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "handleHeadSortClick"[], "handleHeadSortClick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "handleHeadSortClick"[], "handleHeadSortClick", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     column: {
         type: __PropType<columnItemType[]>;
         required: true;
@@ -36,7 +34,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     };
     slots: {
         type: __PropType<Readonly<{
-            [name: string]: import("vue").Slot | undefined;
+            [name: string]: import("vue").Slot<any> | undefined;
         }>>;
         required: true;
     };
@@ -49,5 +47,5 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }, {
     column: columnItemType[];
     height: number | undefined;
-}>;
+}, {}>;
 export default _sfc_main;

dist/lib/h5-table/components/h5-table-row.vue.d.ts

@@ -6,6 +6,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: true;
         default: () => never[];
     };
+    dataIndex: {
+        type: __PropType<number>;
+        required: true;
+    };
     dataItem: {
         type: __PropType<any>;
         required: true;
@@ -16,20 +20,24 @@ declare const _sfc_main: import("vue").DefineComponent<{
     };
     slots: {
         type: __PropType<Readonly<{
-            [name: string]: import("vue").Slot | undefined;
+            [name: string]: import("vue").Slot<any> | undefined;
         }>>;
         required: true;
     };
     rootValue: {
         type: __PropType<number>;
         required: true;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     column: {
         type: __PropType<columnItemType[]>;
         required: true;
         default: () => never[];
     };
+    dataIndex: {
+        type: __PropType<number>;
+        required: true;
+    };
     dataItem: {
         type: __PropType<any>;
         required: true;
@@ -40,7 +48,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     };
     slots: {
         type: __PropType<Readonly<{
-            [name: string]: import("vue").Slot | undefined;
+            [name: string]: import("vue").Slot<any> | undefined;
         }>>;
         required: true;
     };
@@ -50,5 +58,5 @@ declare const _sfc_main: import("vue").DefineComponent<{
     };
 }>>, {
     column: columnItemType[];
-}>;
+}, {}>;
 export default _sfc_main;

dist/lib/h5-table/components/h5-table.vue.d.ts

@@ -85,10 +85,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
         default: number;
     };
-}, {
-    handleDom: (height: number, index: number) => void;
-    tableRef: import("vue").Ref<HTMLElement | null>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("handleHeadSortClick" | "rowClick" | "update:loading" | "update:error" | "load")[], "handleHeadSortClick" | "rowClick" | "update:loading" | "update:error" | "load", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("load" | "handleHeadSortClick" | "rowClick" | "update:loading" | "update:error")[], "load" | "handleHeadSortClick" | "rowClick" | "update:loading" | "update:error", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     minTableHeight: {
         type: __PropType<number | undefined>;
         required: false;
@@ -174,12 +171,13 @@ declare const _sfc_main: import("vue").DefineComponent<{
         default: number;
     };
 }>> & {
+    onLoad?: ((...args: any[]) => any) | undefined;
     onHandleHeadSortClick?: ((...args: any[]) => any) | undefined;
     onRowClick?: ((...args: any[]) => any) | undefined;
     "onUpdate:loading"?: ((...args: any[]) => any) | undefined;
     "onUpdate:error"?: ((...args: any[]) => any) | undefined;
-    onLoad?: ((...args: any[]) => any) | undefined;
 }, {
+    error: boolean | undefined;
     rootValue: number | undefined;
     minTableHeight: number | undefined;
     rowNum: number | undefined;
@@ -189,12 +187,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
     fixedHeader: boolean | undefined;
     isClick: boolean | undefined;
     disable: boolean | undefined;
-    error: boolean | undefined;
     loading: boolean | undefined;
     finish: boolean | undefined;
     loadingText: string | undefined;
     errorText: string | undefined;
     finishedText: string | undefined;
     offset: number | undefined;
-}>;
+}, {}>;
 export default _sfc_main;

dist/lib/h5-table/types/index.d.ts

@@ -10,5 +10,6 @@ export type columnItemType = {
     align?: "left" | "center" | "right";
     key?: string;
     render?: (h: renderType, row: any) => void;
+    fixedLeft?: boolean;
 };
 export type sortStatusType = 0 | 1 | 2;

dist/style.css

@@ -1,4 +1,4 @@
-@charset "UTF-8";.table-row[data-v-2d7b65cf] {
+@charset "UTF-8";.table-row[data-v-98d9cd3a] {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7,7 +7,7 @@
       -ms-flex-wrap: nowrap;
           flex-wrap: nowrap;
 }
-.table-row-column[data-v-2d7b65cf] {
+.table-row-column[data-v-98d9cd3a] {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
@@ -29,34 +29,34 @@
           align-items: center;
   border-bottom: 0.01333rem solid #f4f4f4;
 }
-.first-table-row-column[data-v-2d7b65cf] {
+.first-table-row-column[data-v-98d9cd3a] {
   -webkit-box-flex: 0;
   -webkit-flex-grow: 0;
       -ms-flex-positive: 0;
           flex-grow: 0;
 }
-.cell[data-v-2d7b65cf] {
+.cell[data-v-98d9cd3a] {
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.left[data-v-2d7b65cf] {
+.left[data-v-98d9cd3a] {
   text-align: left;
 }
-.right[data-v-2d7b65cf] {
+.right[data-v-98d9cd3a] {
   text-align: right;
 }
-.center[data-v-2d7b65cf] {
+.center[data-v-98d9cd3a] {
   text-align: center;
-}.title[data-v-e3bb5d1c] {
+}.title[data-v-e6fda73f] {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   font-size: 0.32rem;
 }
-.title .table-row-column[data-v-e3bb5d1c] {
+.title .table-row-column[data-v-e6fda73f] {
   position: relative;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -79,54 +79,54 @@
           align-items: center;
   background-color: #fcfcfc;
 }
-.title .table-row-column .table-caret-wrapper[data-v-e3bb5d1c] {
+.title .table-row-column .table-caret-wrapper[data-v-e6fda73f] {
   position: absolute;
   right: 0;
   width: 0.4rem;
   height: 0.56rem;
 }
-.title .table-row-column .sort-caret[data-v-e3bb5d1c] {
+.title .table-row-column .sort-caret[data-v-e6fda73f] {
   border: 0.13333rem solid transparent;
   width: 0;
   height: 0;
   left: 0;
   position: absolute;
 }
-.title .table-row-column .ascending[data-v-e3bb5d1c] {
+.title .table-row-column .ascending[data-v-e6fda73f] {
   border-bottom-color: #c0c4cc;
   top: 0;
 }
-.title .table-row-column .descending[data-v-e3bb5d1c] {
+.title .table-row-column .descending[data-v-e6fda73f] {
   border-top-color: #c0c4cc;
   bottom: 0;
 }
-.title .table-row-column .is-ascending .ascending[data-v-e3bb5d1c] {
+.title .table-row-column .is-ascending .ascending[data-v-e6fda73f] {
   border-bottom-color: #309fea;
 }
-.title .table-row-column .is-descending .descending[data-v-e3bb5d1c] {
+.title .table-row-column .is-descending .descending[data-v-e6fda73f] {
   border-top-color: #309fea;
 }
-.title .first-table-row-column[data-v-e3bb5d1c] {
+.title .first-table-row-column[data-v-e6fda73f] {
   -webkit-box-flex: 0;
   -webkit-flex-grow: 0;
       -ms-flex-positive: 0;
           flex-grow: 0;
 }
-.table[data-v-95f74e6d] {
+.table[data-v-3910fb11] {
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
-.fixedHeader[data-v-95f74e6d] {
+.fixedHeader[data-v-3910fb11] {
   z-index: 100;
   min-width: 100%;
 }
-.table-header[data-v-95f74e6d] {
+.table-header[data-v-3910fb11] {
   position: relative;
   overflow: hidden;
 }
-.fixed-title-mark[data-v-95f74e6d] {
+.fixed-title-header[data-v-3910fb11] {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -141,15 +141,35 @@
       -ms-flex-align: center;
           align-items: center;
   z-index: 101;
+}
+.fixed-title-mark[data-v-3910fb11] {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
   background-color: #fcfcfc;
 }
-.first-column[data-v-95f74e6d] {
+.first-column-wrapper[data-v-3910fb11] {
   position: absolute;
   top: 0;
   z-index: 9;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.first-column[data-v-3910fb11] {
   background-color: #fff;
 }
-.first-column .table-row-column[data-v-95f74e6d] {
+.first-column .table-row-column[data-v-3910fb11] {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
@@ -171,29 +191,29 @@
           align-items: center;
   border-bottom: 0.01333rem solid #f4f4f4;
 }
-.first-column .cell[data-v-95f74e6d] {
+.first-column .cell[data-v-3910fb11] {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.loading[data-v-95f74e6d] {
+.loading[data-v-3910fb11] {
   text-align: center;
   height: 0.66667rem;
   line-height: 0.66667rem;
 }
-.rowMarkContainer[data-v-95f74e6d] {
+.rowMarkContainer[data-v-3910fb11] {
   width: 100%;
   position: absolute;
   z-index: 9;
 }
-.fixed-title-more[data-v-95f74e6d] {
+.fixed-title-more[data-v-3910fb11] {
   position: absolute;
   right: 0;
   width: 0.8rem;
   z-index: 101;
   background-color: #fcfcfc;
 }
-.fixed-title-more .mark[data-v-95f74e6d] {
+.fixed-title-more .mark[data-v-3910fb11] {
   position: absolute;
   height: 0.26667rem;
   width: 0.26667rem;

lib/h5-table/components/h5-table-cell.ts

@@ -2,6 +2,7 @@ import { h, type Slots, type FunctionalComponent } from "vue";
 
 type PropsType = {
   render?: Function;
+  dataIndex?: any;
   dataItem?: any;
   dataValue: string;
   slotKey: string | undefined;
@@ -11,7 +12,7 @@ type PropsType = {
 const H5TableCell: FunctionalComponent<PropsType> = (props) => {
   // 插槽优先级最高
   if (props.slots && props.slotKey && props.slots[props.slotKey]) {
-    return props.slots[props.slotKey]!(props.dataItem);
+    return props.slots[props.slotKey]!({item: props.dataItem, index: props.dataIndex});
   }
   // 自定义 render
   if (props.render) {

lib/h5-table/components/h5-table-header.vue

@@ -2,6 +2,7 @@
   <div ref="titleRef" class="title">
     <div
       v-for="(item, index) in props.column"
+      :key="index"
       :class="['table-row-column', index === 0 ? 'first-table-row-column' : '']"
       :style="{
         width: cellSize(item.width, props.rootValue),
@@ -12,6 +13,7 @@
     >
       <h5-table-cell
         :key="index"
+        :dataIndex="index"
         :dataValue="item.title"
         :slotKey="item.slotTitleKey"
         :slots="props.slots"