rayyy-vue-table-components 1.3.14 → 1.3.16

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

@@ -24,7 +24,8 @@ declare const _default: <T extends Record<string, unknown> = Record<string, unkn
             row: T;
             rowIndex: number;
         }) => string) | undefined;
-        showOperator?: boolean;
+        showCheckBtn?: boolean;
+        showEditBtn?: boolean;
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;

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

@@ -25,7 +25,8 @@ declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNull
             row: T;
             rowIndex: number;
         }) => string;
-        showOperator?: boolean;
+        showCheckBtn?: boolean;
+        showEditBtn?: boolean;
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;

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

@@ -24,7 +24,8 @@ declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNull
             columns: TableColumnCtx<Record<string, unknown>>[];
             data: T[];
         }) => (string | VNode)[];
-        showOperator?: boolean;
+        showCheckBtn?: boolean;
+        showEditBtn?: boolean;
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;

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

@@ -26,8 +26,10 @@ export interface BaseTableProps<T extends Record<string, unknown> = Record<strin
   }) => (string | VNode)[]
   /** 行樣式類名 */
   baseTableRowClassName?: (data: { row: T; rowIndex: number }) => string
-  /** 是否顯示操作列 */
-  showOperator?: boolean
+  /** 是否顯示查看按鈕 */
+  showCheckBtn?: boolean
+  /** 是否顯示編輯按鈕 */
+  showEditBtn?: boolean
 }
 
 /** BaseTable 組件 Emits 類型 */
@@ -79,8 +81,10 @@ export interface SortTableProps<T extends Record<string, unknown> = Record<strin
   }) => (string | import('vue').VNode)[]
   /** 行樣式類名 */
   sortTableRowClassName?: (data: { row: T; rowIndex: number }) => string
-  /** 是否顯示操作列 */
-  showOperator?: boolean
+  /** 是否顯示查看按鈕 */
+  showCheckBtn?: boolean
+  /** 是否顯示編輯按鈕 */
+  showEditBtn?: boolean
 }
 
 /** SortTable 組件 Emits 類型 */
@@ -136,8 +140,10 @@ export interface TitleTableProps<T extends Record<string, unknown> = Record<stri
     columns: import('element-plus').TableColumnCtx<Record<string, unknown>>[]
     data: T[]
   }) => (string | import('vue').VNode)[]
-  /** 是否顯示操作列 */
-  showOperator?: boolean
+  /** 是否顯示查看按鈕 */
+  showCheckBtn?: boolean
+  /** 是否顯示編輯按鈕 */
+  showEditBtn?: boolean
 }
 
 /** TitleTable 組件 Emits 類型 */

package/package.json

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

package/src/components/tables/BaseTable.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts" generic="T extends Record<string, unknown> = Record<string, unknown>">
 import type { VNode } from 'vue'
+import { computed } from 'vue'
 import type { TableColumnCtx } from 'element-plus'
 import type { SortChangValue, TableColumn } from '@/types'
 
@@ -15,7 +16,8 @@ type Props<T extends Record<string, unknown> = Record<string, unknown>> = {
     data: T[]
   }) => (string | VNode)[]
   baseTableRowClassName?: (data: { row: T; rowIndex: number }) => string
-  showOperator?: boolean
+  showCheckBtn?: boolean
+  showEditBtn?: boolean
 }
 
 // 組件屬性默認值
@@ -25,7 +27,8 @@ const props = withDefaults(defineProps<Props<T>>(), {
   showSelection: false,
   showSummary: false,
   showOverFlowTooltip: false,
-  showOperator: false,
+  showCheckBtn: false,
+  showEditBtn: false,
   summaryMethod: () => [],
   baseTableRowClassName: () => '',
 })
@@ -62,6 +65,15 @@ const onSortChange = (value: SortChangValue<T>) => {
 const handleOperateClick = (value: T, clickType: 'check' | 'edit') => {
   clickType == 'check' ? emit('click:checkRow', value) : emit('click:editRow', value)
 }
+const operatorWidth = computed(() => {
+  if (props.showCheckBtn && props.showEditBtn) {
+    return 120
+  } else if (props.showCheckBtn && !props.showEditBtn) {
+    return 60
+  } else if (props.showEditBtn && !props.showCheckBtn) {
+    return 60
+  }
+})
 </script>
 
 <template>
@@ -102,14 +114,27 @@ const handleOperateClick = (value: T, clickType: 'check' | 'edit') => {
         </div>
       </template>
     </el-table-column>
-    <el-table-column v-if="showOperator" width="120" align="center" fixed="right">
+    <el-table-column
+      v-if="props.showCheckBtn || props.showEditBtn"
+      :width="operatorWidth"
+      align="center"
+      fixed="right"
+    >
       <template #default="{ row }">
         <div class="flex items-center justify-center">
-          <p class="blue-text cursor-pointer font-bold" @click="handleOperateClick(row, 'check')">
+          <p
+            class="blue-text cursor-pointer font-bold"
+            @click="handleOperateClick(row, 'check')"
+            v-if="showCheckBtn"
+          >
             查看
           </p>
-          <el-divider direction="vertical" class="!mx-2" />
-          <p class="blue-text cursor-pointer font-bold" @click="handleOperateClick(row, 'edit')">
+          <el-divider direction="vertical" class="!mx-2" v-if="showCheckBtn && showEditBtn" />
+          <p
+            class="blue-text cursor-pointer font-bold"
+            @click="handleOperateClick(row, 'edit')"
+            v-if="showEditBtn"
+          >
             编辑
           </p>
         </div>

package/src/components/tables/SortTable.vue

@@ -18,7 +18,8 @@ defineProps<{
     data: T[]
   }) => (string | VNode)[]
   sortTableRowClassName?: (data: { row: T; rowIndex: number }) => string
-  showOperator?: boolean
+  showCheckBtn?: boolean
+  showEditBtn?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -77,7 +78,8 @@ const handleEditClick = (row: T) => {
       :summary-method="summaryMethod"
       :show-selection="showSelection"
       :base-table-row-class-name="sortTableRowClassName"
-      :show-operator="showOperator"
+      :show-check-btn="showCheckBtn"
+      :show-edit-btn="showEditBtn"
       @selection-change="handleSelectionChange"
       @cell-click="handleCellClick"
       @column-sort-change="handleColumnSortChange"

package/src/components/tables/TitleTable.vue

@@ -20,7 +20,8 @@ defineProps<{
     columns: TableColumnCtx<Record<string, unknown>>[]
     data: T[]
   }) => (string | VNode)[]
-  showOperator?: boolean
+  showCheckBtn?: boolean
+  showEditBtn?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -83,7 +84,8 @@ const handleEditClick = (row: T) => {
       :summary-method="summaryMethod"
       :show-selection="propIsEditable || showSelection"
       :show-over-flow-tooltip="showOverFlowTooltip"
-      :show-operator="showOperator"
+      :show-check-btn="showCheckBtn"
+      :show-edit-btn="showEditBtn"
       @selection-change="handleSelectionChange"
       @cell-click="handleCellClick"
       @click:checkRow="handleCheckClick"

package/src/types/components.d.ts

@@ -27,8 +27,10 @@ export interface BaseTableProps<T extends Record<string, unknown> = Record<strin
   }) => (string | VNode)[]
   /** 行樣式類名 */
   baseTableRowClassName?: (data: { row: T; rowIndex: number }) => string
-  /** 是否顯示操作列 */
-  showOperator?: boolean
+  /** 是否顯示查看按鈕 */
+  showCheckBtn?: boolean
+  /** 是否顯示編輯按鈕 */
+  showEditBtn?: boolean
 }
 
 /** BaseTable 組件 Emits 類型 */
@@ -80,8 +82,10 @@ export interface SortTableProps<T extends Record<string, unknown> = Record<strin
   }) => (string | import('vue').VNode)[]
   /** 行樣式類名 */
   sortTableRowClassName?: (data: { row: T; rowIndex: number }) => string
-  /** 是否顯示操作列 */
-  showOperator?: boolean
+  /** 是否顯示查看按鈕 */
+  showCheckBtn?: boolean
+  /** 是否顯示編輯按鈕 */
+  showEditBtn?: boolean
 }
 
 /** SortTable 組件 Emits 類型 */
@@ -137,8 +141,10 @@ export interface TitleTableProps<T extends Record<string, unknown> = Record<stri
     columns: import('element-plus').TableColumnCtx<Record<string, unknown>>[]
     data: T[]
   }) => (string | import('vue').VNode)[]
-  /** 是否顯示操作列 */
-  showOperator?: boolean
+  /** 是否顯示查看按鈕 */
+  showCheckBtn?: boolean
+  /** 是否顯示編輯按鈕 */
+  showEditBtn?: boolean
 }
 
 /** TitleTable 組件 Emits 類型 */