u

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

@@ -3,17 +3,21 @@ import { ref } from 'vue'
 import { G3Table } from '@g3soft/ui'
 import type { G3TableColumn, TableRow } from '@g3soft/ui'
 
-// 行内编辑：列上加 editor 即可。
-// 单击单元格进入编辑；Enter 确认、Esc 取消。值变化通过 change 事件抛出。
+// 行内编辑：列上加 editor 即可。单击单元格进入编辑，Enter 确认、Esc 取消。
 //
-// 编辑器类型：text / number / textarea / select / checkbox
-// checkbox 约定 1 = 选中、0 = 未选中（与后端 tinyint 对齐）。
+// 编辑器类型：
+//   text / number / password / textarea → 用 G3Input 渲染
+//   select    → 用 G3Select 渲染；options 可传数组，也可传「接收当前行的函数」
+//   checkbox  → 点击即切换，无需先激活整行；约定 1 = 选中、0 = 未选中（对齐后端 tinyint）
+//
+// 关键行为：输入值先写进内部草稿，**失焦才落库并抛出 change**。
+// 这样每敲一个字符不会触发父级重渲染（否则光标会丢、输入法会断）。
 const columns: G3TableColumn<TableRow>[] = [
   { dataIndex: 'name', title: '名称', width: 200, editor: { type: 'text' } },
   {
     dataIndex: 'status',
-    title: '状态',
-    width: 140,
+    title: '状态（select）',
+    width: 150,
     editor: {
       type: 'select',
       options: [
@@ -23,25 +27,53 @@ const columns: G3TableColumn<TableRow>[] = [
     },
   },
   { dataIndex: 'enabled', title: '启用', width: 80, editor: { type: 'checkbox' } },
-  { dataIndex: 'qty', title: '数量', width: 120, align: 'right', editor: { type: 'number' } },
+  { dataIndex: 'qty', title: '数量（number）', width: 140, align: 'right', editor: { type: 'number' } },
+  {
+    dataIndex: 'remark',
+    title: '备注（textarea）',
+    width: 180,
+    editor: { type: 'textarea' },
+  },
+  {
+    dataIndex: 'owner',
+    title: '负责人（options 依赖本行）',
+    width: 200,
+    // options 传函数时会收到当前行 —— 按「状态」给出不同候选人。
+    // 注意这类列在非编辑态会把值解析成 label 展示。
+    editor: {
+      type: 'select',
+      options: (row: TableRow) =>
+        row.status === 1
+          ? [
+              { label: '张三', value: '张三' },
+              { label: '李四', value: '李四' },
+            ]
+          : [{ label: '王五', value: '王五' }],
+    },
+  },
 ]
 
 const data = ref<TableRow[]>([
-  { id: 1, name: '框架合同', status: 1, enabled: 1, qty: 12 },
-  { id: 2, name: '采购订单', status: 0, enabled: 0, qty: 45 },
+  { id: 1, name: '框架合同', status: 1, enabled: 1, qty: 12, remark: '年度框架', owner: '张三' },
+  { id: 2, name: '采购订单', status: 0, enabled: 0, qty: 45, remark: '', owner: '王五' },
 ])
 
 const lastChange = ref('')
 
 function onChange(row: TableRow, col: G3TableColumn<TableRow>, value: unknown) {
-  lastChange.value = `${row.name} 的「${col.title}」改为 ${value}`
+  // 只有值**真的变化**才会走到这里（组件内部按编辑前的快照去重），
+  // 所以「点进去又点出来」不会产生无意义的 change。
+  lastChange.value = `「${row.name}」的「${col.title}」→ ${value}`
 }
 </script>
 
 <template>
   <div>
     <p style="margin: 0 0 8px; color: #666; font-size: 13px">
-      最近一次修改：{{ lastChange || '（点击单元格试试）' }}
+      最近一次 change：{{ lastChange || '（点击单元格试试）' }}
+    </p>
+    <p style="margin: 0 0 8px; color: #999; font-size: 12px">
+      单击进入编辑 · Enter 确认 · Esc 取消 · Tab / 方向键可换格
     </p>
     <div style="height: 240px">
       <G3Table :columns="columns" :data-source="data" :seq="false" @change="onChange" />