u

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

@@ -10,6 +10,13 @@ import type { G3TableColumn, TableRow } from '@g3soft/ui'
 //   select    → 用 G3Select 渲染；options 可传数组，也可传「接收当前行的函数」
 //   checkbox  → 点击即切换，无需先激活整行；约定 1 = 选中、0 = 未选中（对齐后端 tinyint）
 //
+// 形态（editorSeamless，默认 true）：**单元格内无外间距 + 编辑器无常驻边框**。
+// 编辑器整格铺满、融进表格，只有焦点（格内主色环）、hover（极淡填充）
+// 和校验（红色文字）才出现视觉提示——这是整行编辑 / 键盘连续录入 /
+// 固定列宽 / 专业用户（Excel、AG Grid）的表格态。
+// 传 :editor-seamless="false" 则回到「格内留一圈间距 + 自身描边」的悬浮卡片观感。
+// 两种形态下编辑器的盒高都等于行高，切换不会改变行高、也不会让同行其它格跳动。
+//
 // 关键行为：输入值先写进内部草稿，**失焦才落库并抛出 change**。
 // 这样每敲一个字符不会触发父级重渲染（否则光标会丢、输入法会断）。
 const columns: G3TableColumn<TableRow>[] = [
@@ -73,7 +80,8 @@ 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 取消 · Tab / 方向键可换格 ·
+      单元格内无外间距、无常驻边框，焦点时才出现主色焦点环
     </p>
     <div style="height: 240px">
       <G3Table :columns="columns" :data-source="data" :seq="false" @change="onChange" />