rayyy-vue-table-components 2.0.51 → 2.0.52

package/dist/src/components/tables/TitleTable.vue.d.ts

@@ -27,12 +27,18 @@ declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNull
         }) => (string | VNode)[];
         showCheckBtn?: boolean;
         showEditBtn?: boolean;
+        showExpand?: boolean;
+        preserveExpanded?: boolean;
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
         tableSearch?(_: {}): any;
         editBtn?(_: {}): any;
+        expand?(_: {
+            row: T;
+            $index: number;
+        }): any;
     };
     emit: {
         (e: "click:add"): void;

package/dist/src/types/components.d.ts

@@ -28,10 +28,20 @@ export interface BaseTableProps<T extends Record<string, unknown> = Record<strin
   }) => (string | VNode)[]
   /** 行樣式類名 */
   baseTableRowClassName?: (data: { row: T; rowIndex: number }) => string
+  /** 是否顯示展開列 */
+  showExpand?: boolean
   /** 是否顯示查看按鈕 */
   showCheckBtn?: boolean
   /** 是否顯示編輯按鈕 */
   showEditBtn?: boolean
+  /** 是否保留展開內容 */
+  preserveExpanded?: boolean
+}
+
+/** BaseTable 組件 Slots 類型 */
+export interface BaseTableSlots<T extends Record<string, unknown> = Record<string, unknown>> {
+  /** 展開行內容 slot */
+  expand?: (props: { row: T; $index: number }) => VNode[]
 }
 
 /** BaseTable 組件 Emits 類型 */
@@ -85,10 +95,22 @@ export interface SortTableProps<T extends Record<string, unknown> = Record<strin
   }) => (string | import('vue').VNode)[]
   /** 行樣式類名 */
   sortTableRowClassName?: (data: { row: T; rowIndex: number }) => string
+  /** 是否顯示展開列 */
+  showExpand?: boolean
   /** 是否顯示查看按鈕 */
   showCheckBtn?: boolean
   /** 是否顯示編輯按鈕 */
   showEditBtn?: boolean
+  /** 是否保留展開內容 */
+  preserveExpanded?: boolean
+}
+
+/** SortTable 組件 Slots 類型 */
+export interface SortTableSlots<T extends Record<string, unknown> = Record<string, unknown>> {
+  /** 第一個按鈕 slot */
+  firstButton?: () => VNode[]
+  /** 展開行內容 slot */
+  expand?: (props: { row: T; $index: number }) => VNode[]
 }
 
 /** SortTable 組件 Emits 類型 */
@@ -148,10 +170,24 @@ export interface TitleTableProps<T extends Record<string, unknown> = Record<stri
     columns: import('element-plus').TableColumnCtx<Record<string, unknown>>[]
     data: T[]
   }) => (string | import('vue').VNode)[]
+  /** 是否顯示展開列 */
+  showExpand?: boolean
   /** 是否顯示查看按鈕 */
   showCheckBtn?: boolean
   /** 是否顯示編輯按鈕 */
   showEditBtn?: boolean
+  /** 是否保留展開內容 */
+  preserveExpanded?: boolean
+}
+
+/** TitleTable 組件 Slots 類型 */
+export interface TitleTableSlots<T extends Record<string, unknown> = Record<string, unknown>> {
+  /** 搜尋 slot */
+  tableSearch?: () => VNode[]
+  /** 編輯按鈕 slot */
+  editBtn?: () => VNode[]
+  /** 展開行內容 slot */
+  expand?: (props: { row: T; $index: number }) => VNode[]
 }
 
 /** TitleTable 組件 Emits 類型 */
@@ -662,7 +698,7 @@ export declare const BaseTable: DefineComponent<
   {},
   {},
   {},
-  {},
+  BaseTableSlots<any>,
   BaseTableEmits<any>
 > & {
   /** 安裝方法 */
@@ -678,7 +714,7 @@ export declare const SortTable: DefineComponent<
   {},
   {},
   {},
-  {},
+  SortTableSlots<any>,
   SortTableEmits<any>
 > & {
   /** 安裝方法 */
@@ -694,7 +730,7 @@ export declare const TitleTable: DefineComponent<
   {},
   {},
   {},
-  {},
+  TitleTableSlots<any>,
   TitleTableEmits<any>
 > & {
   /** 安裝方法 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayyy-vue-table-components",
-  "version": "2.0.51",
+  "version": "2.0.52",
   "description": "Vue 3 + Element Plus 表格組件庫",
   "type": "module",
   "main": "./dist/index.umd.js",

package/src/components/index.ts

@@ -22,6 +22,7 @@ export type {
   BaseTableProps,
   BaseTableEmits,
   BaseTableInstance,
+  BaseTableSlots,
   // BaseBtn 組件類型
   BaseBtnProps,
   BaseBtnEmits,
@@ -42,10 +43,12 @@ export type {
   SortTableProps,
   SortTableEmits,
   SortTableInstance,
+  SortTableSlots,
   // TitleTable 組件類型
   TitleTableProps,
   TitleTableEmits,
   TitleTableInstance,
+  TitleTableSlots,
   // SearchBar 組件類型
   SearchBarProps,
   SearchBarEmits,

package/src/components/tables/BaseTable.vue

@@ -14,6 +14,7 @@ type Props<T extends Record<string, unknown> = Record<string, unknown>> = {
   columns: TableColumn<T>[]
   showSelection?: boolean
   showIndex?: boolean
+  showExpand?: boolean
   showSummary?: boolean
   showOverFlowTooltip?: boolean
   summaryMethod?: (param: {
@@ -23,7 +24,8 @@ type Props<T extends Record<string, unknown> = Record<string, unknown>> = {
   baseTableRowClassName?: (data: { row: T; rowIndex: number }) => string
   showCheckBtn?: boolean
   showEditBtn?: boolean
-  locale?: Language // 新增：Element Plus locale
+  preserveExpanded?: boolean
+  locale?: Language
 }
 
 // 組件屬性默認值
@@ -32,10 +34,12 @@ const props = withDefaults(defineProps<Props<T>>(), {
   data: () => [],
   showSelection: false,
   showIndex: false,
+  showExpand: false,
   showSummary: false,
   showOverFlowTooltip: false,
   showCheckBtn: false,
   showEditBtn: false,
+  preserveExpanded: false,
   summaryMethod: () => [],
   baseTableRowClassName: () => '',
 })
@@ -49,6 +53,10 @@ const emit = defineEmits<{
   (e: 'click:editRow', row: T): void
 }>()
 
+defineSlots<{
+  expand?: (props: { row: T; $index: number }) => VNode[]
+}>()
+
 const handleCellClick = (column: TableColumn<T>, row: T) => {
   emit('cell-click', column, row)
 }
@@ -97,6 +105,7 @@ const operatorWidth = computed(() => {
     class="data-table"
     @selection-change="handleSelectionChange"
     @current-change="(currentRow: any) => emit('current-change', currentRow)"
+    :preserve-expanded-content="preserveExpanded"
     :sort="() => {}"
     @sort-change="onSortChange"
   >
@@ -106,6 +115,13 @@ const operatorWidth = computed(() => {
     <!-- 索引列 -->
     <el-table-column v-if="showIndex" type="index" width="60" fixed="left" align="center" label="No" />
 
+    <!-- 展開列 -->
+    <el-table-column v-if="showExpand" type="expand">
+      <template #default="{ row, $index }">
+        <slot name="expand" :row="row" :$index="$index" />
+      </template>
+    </el-table-column>
+
     <!-- 數據列 -->
     <el-table-column v-for="(column, index) in columns" :key="index" v-bind="column">
       <template #default="{ row }">

package/src/components/tables/SortTable.vue

@@ -21,6 +21,8 @@ defineProps<{
   sortTableRowClassName?: (data: { row: T; rowIndex: number }) => string
   showCheckBtn?: boolean
   showEditBtn?: boolean
+  showExpand?: boolean
+  preserveExpanded?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -108,15 +110,21 @@ const state = reactive({
       :summary-method="summaryMethod"
       :show-selection="showSelection"
       :show-index="showIndex"
+      :show-expand="showExpand"
       :base-table-row-class-name="sortTableRowClassName"
       :show-check-btn="showCheckBtn"
       :show-edit-btn="showEditBtn"
+      :preserve-expanded="preserveExpanded"
       @selection-change="handleSelectionChange"
       @cell-click="handleCellClick"
       @column-sort-change="handleColumnSortChange"
       @click:checkRow="handleCheckClick"
       @click:editRow="handleEditClick"
-    />
+    >
+      <template #expand="{ row, $index }" v-if="showExpand">
+        <slot name="expand" :row="row" :$index="$index" />
+      </template>
+    </base-table>
   </div>
 </template>
 

package/src/components/tables/TitleTable.vue

@@ -26,6 +26,8 @@ defineProps<{
   }) => (string | VNode)[]
   showCheckBtn?: boolean
   showEditBtn?: boolean
+  showExpand?: boolean
+  preserveExpanded?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -98,14 +100,20 @@ const handleEditClick = (row: T) => {
       :summary-method="summaryMethod"
       :show-selection="propIsEditable || showSelection"
       :show-index="showIndex"
+      :show-expand="showExpand"
       :show-over-flow-tooltip="showOverFlowTooltip"
       :show-check-btn="showCheckBtn"
       :show-edit-btn="showEditBtn"
+      :preserve-expanded="preserveExpanded"
       @selection-change="handleSelectionChange"
       @cell-click="handleCellClick"
       @click:checkRow="handleCheckClick"
       @click:editRow="handleEditClick"
-    />
+    >
+      <template #expand="{ row, $index }" v-if="showExpand">
+        <slot name="expand" :row="row" :$index="$index" />
+      </template>
+    </base-table>
   </div>
 </template>
 

package/src/types/components.d.ts

@@ -29,10 +29,20 @@ export interface BaseTableProps<T extends Record<string, unknown> = Record<strin
   }) => (string | VNode)[]
   /** 行樣式類名 */
   baseTableRowClassName?: (data: { row: T; rowIndex: number }) => string
+  /** 是否顯示展開列 */
+  showExpand?: boolean
   /** 是否顯示查看按鈕 */
   showCheckBtn?: boolean
   /** 是否顯示編輯按鈕 */
   showEditBtn?: boolean
+  /** 是否保留展開內容 */
+  preserveExpanded?: boolean
+}
+
+/** BaseTable 組件 Slots 類型 */
+export interface BaseTableSlots<T extends Record<string, unknown> = Record<string, unknown>> {
+  /** 展開行內容 slot */
+  expand?: (props: { row: T; $index: number }) => VNode[]
 }
 
 /** BaseTable 組件 Emits 類型 */
@@ -86,10 +96,22 @@ export interface SortTableProps<T extends Record<string, unknown> = Record<strin
   }) => (string | import('vue').VNode)[]
   /** 行樣式類名 */
   sortTableRowClassName?: (data: { row: T; rowIndex: number }) => string
+  /** 是否顯示展開列 */
+  showExpand?: boolean
   /** 是否顯示查看按鈕 */
   showCheckBtn?: boolean
   /** 是否顯示編輯按鈕 */
   showEditBtn?: boolean
+  /** 是否保留展開內容 */
+  preserveExpanded?: boolean
+}
+
+/** SortTable 組件 Slots 類型 */
+export interface SortTableSlots<T extends Record<string, unknown> = Record<string, unknown>> {
+  /** 第一個按鈕 slot */
+  firstButton?: () => VNode[]
+  /** 展開行內容 slot */
+  expand?: (props: { row: T; $index: number }) => VNode[]
 }
 
 /** SortTable 組件 Emits 類型 */
@@ -149,10 +171,24 @@ export interface TitleTableProps<T extends Record<string, unknown> = Record<stri
     columns: import('element-plus').TableColumnCtx<Record<string, unknown>>[]
     data: T[]
   }) => (string | import('vue').VNode)[]
+  /** 是否顯示展開列 */
+  showExpand?: boolean
   /** 是否顯示查看按鈕 */
   showCheckBtn?: boolean
   /** 是否顯示編輯按鈕 */
   showEditBtn?: boolean
+  /** 是否保留展開內容 */
+  preserveExpanded?: boolean
+}
+
+/** TitleTable 組件 Slots 類型 */
+export interface TitleTableSlots<T extends Record<string, unknown> = Record<string, unknown>> {
+  /** 搜尋 slot */
+  tableSearch?: () => VNode[]
+  /** 編輯按鈕 slot */
+  editBtn?: () => VNode[]
+  /** 展開行內容 slot */
+  expand?: (props: { row: T; $index: number }) => VNode[]
 }
 
 /** TitleTable 組件 Emits 類型 */
@@ -663,7 +699,7 @@ export declare const BaseTable: DefineComponent<
   {},
   {},
   {},
-  {},
+  BaseTableSlots<any>,
   BaseTableEmits<any>
 > & {
   /** 安裝方法 */
@@ -679,7 +715,7 @@ export declare const SortTable: DefineComponent<
   {},
   {},
   {},
-  {},
+  SortTableSlots<any>,
   SortTableEmits<any>
 > & {
   /** 安裝方法 */
@@ -695,7 +731,7 @@ export declare const TitleTable: DefineComponent<
   {},
   {},
   {},
-  {},
+  TitleTableSlots<any>,
   TitleTableEmits<any>
 > & {
   /** 安裝方法 */