u

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

@@ -4,12 +4,9 @@ import { G3Table } from '@g3soft/ui'
 import type { G3TableColumn, TableRow } from '@g3soft/ui'
 
 // 最小用法：给 columns 与 dataSource 两份数据即可。
-// - seq 默认开启，会在最前列注入序号列
-// - bordered 默认开启：圆角外框由组件自绘；横竖格线仍走底座的背景渐变
+// - seq 默认开启，会在最前列注入序号列（固定左侧）
+// - bordered 默认开启：圆角外框由组件自绘 + 行分隔线
 // - 没写 width 的列会自动摊掉剩余宽度
-// - 本例额外开了 `stripe`（斑马纹，默认关）：注意**序号列也带条纹** ——
-//   冻结列的底色必须不透明（否则横滚时被压住的内容会透字），
-//   组件在冻结列上补了一层同色内阴影把条纹接上，业务不用管。
 const columns: G3TableColumn<TableRow>[] = [
   { dataIndex: 'name', title: '名称', width: 180 },
   { dataIndex: 'amount', title: '金额', width: 120, align: 'right' },
@@ -25,6 +22,6 @@ const data = ref<TableRow[]>([
 
 <template>
   <div style="height: 260px">
-    <G3Table :columns="columns" :data-source="data" stripe />
+    <G3Table :columns="columns" :data-source="data" />
   </div>
 </template>

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

@@ -3,24 +3,28 @@ import { ref } from 'vue'
 import { G3Table } from '@g3soft/ui'
 import type { G3TableColumn, TableRow } from '@g3soft/ui'
 
-// 行内编辑：列上加 editor 即可。单击单元格进入编辑，Enter 确认、Esc 取消。
+// 行内编辑：列上加 editor 即可。**单击**单元格进入编辑（不需要双击）。
 //
-// 编辑器类型：
-//   text / number / password / textarea → 用 G3Input 渲染
-//   select    → 用 G3Select 渲染；options 可传数组，也可传「接收当前行的函数」
-//   checkbox  → 点击即切换，无需先激活整行；约定 1 = 选中、0 = 未选中（对齐后端 tinyint）
-//
-// 形态（editorSeamless，默认 true）：**单元格内无外间距 + 编辑器无常驻边框**。
-// 编辑器整格铺满、融进表格，只有焦点（格内主色环）、hover（极淡填充）
-// 和校验（红色文字）才出现视觉提示——这是整行编辑 / 键盘连续录入 /
-// 固定列宽 / 专业用户（Excel、AG Grid）的表格态。
-// 传 :editor-seamless="false" 则回到「格内留一圈间距 + 自身描边」的悬浮卡片观感。
-// 两种形态下编辑器的盒高都等于行高，切换不会改变行高、也不会让同行其它格跳动。
+// 编辑器类型（注意 `input` 是统称，细分形态走 inputType）：
+//   { type: 'input' }                         → 单行文本，用 G3Input 渲染
+//   { type: 'input', inputType: 'number' }    → 数字
+//   { type: 'input', inputType: 'password' }
+//   { type: 'input', inputType: 'textarea' }
+//   { type: 'select' }                        → 用 G3Select 渲染；options 可传数组，
+//                                               也可传「接收当前行的函数」
+//   { type: 'checkbox' }                      → 点击即切换，无需先激活整行；
+//                                               约定 1 = 选中、0 = 未选中（对齐后端 tinyint）
 //
 // 关键行为：输入值先写进内部草稿，**失焦才落库并抛出 change**。
 // 这样每敲一个字符不会触发父级重渲染（否则光标会丢、输入法会断）。
+//
+// 键盘：编辑态下 Enter 会全选当前格内容（可直接覆盖输入）、Esc 退出编辑；
+// 方向键由表格接管移动选区（按住连按时会先等按键松开再挂编辑器，避免掉帧）。
+//
+// ⚠️ 数据源必须是响应式的：行对象要能被 Vue 追踪，否则改动不会触发重渲染
+// （change 照常抛出，但界面仍显示旧值，且要等一次无关重渲染才更新）。
 const columns: G3TableColumn<TableRow>[] = [
-  { dataIndex: 'name', title: '名称', width: 200, editor: { type: 'text' } },
+  { dataIndex: 'name', title: '名称', width: 200, editor: { type: 'input' } },
   {
     dataIndex: 'status',
     title: '状态（select）',
@@ -34,14 +38,20 @@ const columns: G3TableColumn<TableRow>[] = [
     },
   },
   { dataIndex: 'enabled', title: '启用', width: 80, editor: { type: 'checkbox' } },
-  { dataIndex: 'qty', title: '数量（number）', width: 140, align: 'right', editor: { type: 'number' } },
+  {
+    dataIndex: 'qty',
+    title: '数量（number）',
+    width: 140,
+    align: 'right',
+    editor: { type: 'input', inputType: 'number' },
+  },
   {
     dataIndex: 'remark',
-    title: '备注（textarea）',
+    title: '备注',
     width: 180,
-    // 按行禁用：这一行「改不了」时铺灰底（无需先点开）。这里演示常见的
-    // 「停用之后不许再改备注」——第 2 行 status=0，所以它的备注格是灰的。
-    editor: { type: 'textarea', disabled: (row) => row.status === 0 },
+    // 按行禁用：这一行「改不了」时该格只读（无需先点开）。
+    // 这里演示常见的「停用之后不许再改备注」——第 2 行 status=0。
+    editor: { type: 'input', disabled: (row) => row.status === 0 },
   },
   {
     dataIndex: 'owner',
@@ -82,8 +92,7 @@ function onChange(row: TableRow, col: G3TableColumn<TableRow>, value: unknown) {
       最近一次 change：{{ lastChange || '（点击单元格试试）' }}
     </p>
     <p style="margin: 0 0 8px; color: #999; font-size: 12px">
-      单击进入编辑 · Enter 确认 · Esc 取消 · Tab / 方向键可换格 ·
-      单元格内无外间距、无常驻边框，焦点时才出现主色焦点环
+      单击进入编辑 · Enter 全选当前格 · Esc 退出 · 方向键移动选区 · 失焦提交
     </p>
     <div style="height: 240px">
       <G3Table :columns="columns" :data-source="data" :seq="false" @change="onChange" />

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

@@ -43,9 +43,10 @@ const dragData = ref<TableRow[]>([
 
 const orderText = ref('')
 
-function onRowOrderChange(rows: TableRow[], sourceIndex: number, targetIndex: number) {
+// ⚠️ 后两个参数是**行 key**（底座的 dragStartKey / targetRowKey），不是索引。
+function onRowOrderChange(rows: TableRow[], dragStartKey: string | number, targetRowKey: string | number) {
   dragData.value = rows
-  orderText.value = `${sourceIndex} → ${targetIndex}：${rows.map((r) => r.name).join(' → ')}`
+  orderText.value = `${dragStartKey} → ${targetRowKey}：${rows.map((r) => r.name).join(' → ')}`
 }
 
 // 当前列宽（演示 v-model:columns 的回写确实发生了）