u

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { G3Table } from '@g3soft/ui'
+import type { G3TableColumn, TableRow } from '@g3soft/ui'
+
+// 行内编辑：列上加 editor 即可。
+// 单击单元格进入编辑；Enter 确认、Esc 取消。值变化通过 change 事件抛出。
+//
+// 编辑器类型：text / number / textarea / select / checkbox
+// checkbox 约定 1 = 选中、0 = 未选中（与后端 tinyint 对齐）。
+const columns: G3TableColumn<TableRow>[] = [
+  { dataIndex: 'name', title: '名称', width: 200, editor: { type: 'text' } },
+  {
+    dataIndex: 'status',
+    title: '状态',
+    width: 140,
+    editor: {
+      type: 'select',
+      options: [
+        { label: '启用', value: 1 },
+        { label: '停用', value: 0 },
+      ],
+    },
+  },
+  { dataIndex: 'enabled', title: '启用', width: 80, editor: { type: 'checkbox' } },
+  { dataIndex: 'qty', title: '数量', width: 120, align: 'right', editor: { type: 'number' } },
+]
+
+const data = ref<TableRow[]>([
+  { id: 1, name: '框架合同', status: 1, enabled: 1, qty: 12 },
+  { id: 2, name: '采购订单', status: 0, enabled: 0, qty: 45 },
+])
+
+const lastChange = ref('')
+
+function onChange(row: TableRow, col: G3TableColumn<TableRow>, value: unknown) {
+  lastChange.value = `${row.name} 的「${col.title}」改为 ${value}`
+}
+</script>
+
+<template>
+  <div>
+    <p style="margin: 0 0 8px; color: #666; font-size: 13px">
+      最近一次修改：{{ lastChange || '（点击单元格试试）' }}
+    </p>
+    <div style="height: 240px">
+      <G3Table :columns="columns" :data-source="data" :seq="false" @change="onChange" />
+    </div>
+  </div>
+</template>