u

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Pencil, Trash2 } from '@lucide/vue'
+import { G3Message, G3Table } from '@g3soft/ui'
+import type { G3TableColumn, TableRow } from '@g3soft/ui'
+
+// 操作列：列上加 actions 即可，渲染成一排小按钮。
+// - type: 'more' 的项会收进「更多」下拉（这里没配，全部内联显示）
+// - confirm 给字符串或对象时先弹确认框，确认后才执行 onClick
+// - 操作列建议显式写 resizable: false（宽度由内容决定，拖了不落库）
+const columns: G3TableColumn<TableRow>[] = [
+  { dataIndex: 'name', title: '名称', width: 180 },
+  { dataIndex: 'amount', title: '金额', width: 120, align: 'right' },
+  {
+    dataIndex: 'op',
+    title: '操作',
+    width: 160,
+    resizable: false,
+    actions: [
+      {
+        label: '编辑',
+        icon: Pencil,
+        onClick: (row) => G3Message.info(`编辑：${row.name}`),
+      },
+      {
+        label: '删除',
+        icon: Trash2,
+        type: 'danger',
+        confirm: { title: '确认删除', description: '删除后不可恢复，确定继续吗？' },
+        onClick: (row) => G3Message.success(`已删除：${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>
+</template>