u

code/g3soft-libs/docs/examples/table/actions.vue

@@ -1,20 +1,29 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Pencil, Trash2 } from '@lucide/vue'
+import { Pencil, Trash2, Copy, Archive, Download } from '@lucide/vue'
 import { G3Message, G3Table } from '@g3soft/ui'
 import type { G3TableColumn, TableRow } from '@g3soft/ui'
 
 // 操作列：列上加 actions 即可，渲染成一排小按钮。
-// - type: 'more' 的项会收进「更多」下拉（这里没配，全部内联显示）
-// - confirm 给字符串或对象时先弹确认框，确认后才执行 onClick
-// - 操作列建议显式写 resizable: false（宽度由内容决定，拖了不落库）
+//   - type: 'danger' | 'delete' → 危险色
+//   - visible / disabled 可传 boolean 或 (row) => boolean
+//   - confirm：字符串=标题，对象=完整配置；确认后才执行 onClick
+//   - type: 'more' 的项收进「更多」下拉（它的 items 是子项）
+//
+// 操作列建议显式写 resizable: false —— 宽度由内容决定，拖了不会落库，列一重建就丢。
+const data = ref<TableRow[]>([
+  { id: 1, name: '框架合同', amount: 120000, status: 'draft' },
+  { id: 2, name: '采购订单', amount: 86000, status: 'active' },
+  { id: 3, name: '验收单', amount: 43000, status: 'archived' },
+])
+
 const columns: G3TableColumn<TableRow>[] = [
   { dataIndex: 'name', title: '名称', width: 180 },
   { dataIndex: 'amount', title: '金额', width: 120, align: 'right' },
   {
     dataIndex: 'op',
     title: '操作',
-    width: 160,
+    width: 220,
     resizable: false,
     actions: [
       {
@@ -26,22 +35,49 @@ const columns: G3TableColumn<TableRow>[] = [
         label: '删除',
         icon: Trash2,
         type: 'danger',
+        // 已归档的单据不允许删除
+        disabled: (row) => row.status === 'archived',
         confirm: { title: '确认删除', description: '删除后不可恢复，确定继续吗？' },
         onClick: (row) => G3Message.success(`已删除：${row.name}`),
       },
+      {
+        type: 'more',
+        label: '更多',
+        items: [
+          {
+            key: 'copy',
+            label: '复制',
+            icon: Copy,
+            onClick: (row) => G3Message.info(`复制：${row.name}`),
+          },
+          {
+            key: 'archive',
+            label: '归档',
+            icon: Archive,
+            // 已归档的不再显示该项（visible 传函数）
+            visible: (row) => row.status !== 'archived',
+            onClick: (row) => G3Message.success(`已归档：${row.name}`),
+          },
+          {
+            key: 'export',
+            label: '导出',
+            icon: Download,
+            onClick: (row) => G3Message.info(`导出：${row.name}`),
+          },
+        ],
+      },
     ],
   },
 ]
-
-const data = ref<TableRow[]>([
-  { id: 1, name: '框架合同', amount: 120000 },
-  { id: 2, name: '采购订单', amount: 86000 },
-  { id: 3, name: '验收单', amount: 43000 },
-])
 </script>
 
 <template>
-  <div style="height: 260px">
-    <G3Table :columns="columns" :data-source="data" />
+  <div>
+    <p style="margin: 0 0 8px; color: #999; font-size: 12px">
+      「删除」带二次确认，且对已归档行禁用；「更多」里「归档」对已归档行隐藏。
+    </p>
+    <div style="height: 260px">
+      <G3Table :columns="columns" :data-source="data" />
+    </div>
   </div>
 </template>