u

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

@@ -3,21 +3,22 @@ import { ref } from 'vue'
 import { G3Table } from '@g3soft/ui'
 import type { G3TableColumn, TableRow } from '@g3soft/ui'
 
-// 列宽 / 列序拖拽与「列定义回写」：
-// 两者都要求用 v-model:columns 绑定，否则组件拖完无处回写（松手回弹），
-// 组件检测到没绑定会直接关掉这两个功能。
+// 列宽 / 列序拖拽要求用 v-model:columns 绑定列定义。
+// 组件会检测父级有没有绑 update:columns —— 没绑就**直接关掉**这两个功能，
+// 因为拖完无处回写（松手回弹）。这也是最容易踩的一条。
 const columns = ref<G3TableColumn<TableRow>[]>([
   { dataIndex: 'name', title: '名称（可拖宽）', width: 200 },
   { dataIndex: 'amount', title: '金额', width: 140, align: 'right' },
   { dataIndex: 'owner', title: '负责人', width: 140 },
-  // 操作列声明 resizable: false 后不可拖宽
+  // 操作列显式声明 resizable: false —— 它的宽度由内容决定，拖了不会落库、列一重建就丢。
+  // 也可以在 colResizable 里用 disabled(col) 按列禁用。
   { dataIndex: 'op', title: '操作', width: 100, resizable: false },
 ])
 
-// 行拖拽排序：开启后显示拖拽手柄，拖完通过 row-order-change 回传新顺序
-const dragColumns = ref<G3TableColumn<TableRow>[]>([
-  { dataIndex: 'name', title: '名称' },
-  { dataIndex: 'amount', title: '金额', align: 'right' },
+// 按列禁用拖宽的另一种写法：整列标成 noResize。
+const columnsByConfig = ref<G3TableColumn<TableRow>[]>([
+  { dataIndex: 'name', title: '名称', width: 180 },
+  { dataIndex: 'amount', title: '金额（禁用拖宽）', width: 160, align: 'right' },
 ])
 
 const data = ref<TableRow[]>([
@@ -26,27 +27,60 @@ const data = ref<TableRow[]>([
   { id: 3, name: '验收单', amount: 43000, owner: '王五', op: '—' },
 ])
 
+// ── 行拖拽排序 ──
+// row-draggable 开启后最左侧出现拖拽手柄；拖完通过 row-order-change 回传新顺序。
+// 注意回传的是 (rows, sourceIndex, targetIndex) —— rows 是拖拽后的完整数据，直接用即可。
+const dragColumns = ref<G3TableColumn<TableRow>[]>([
+  { dataIndex: 'name', title: '步骤' },
+  { dataIndex: 'amount', title: '耗时（分钟）', align: 'right' },
+])
+
 const dragData = ref<TableRow[]>([
-  { id: 1, name: '第一步', amount: 100 },
-  { id: 2, name: '第二步', amount: 200 },
-  { id: 3, name: '第三步', amount: 300 },
+  { id: 1, name: '第一步：准备', amount: 100 },
+  { id: 2, name: '第二步：执行', amount: 200 },
+  { id: 3, name: '第三步：验收', amount: 300 },
 ])
 
 const orderText = ref('')
 
-function onRowOrderChange(rows: TableRow[]) {
+function onRowOrderChange(rows: TableRow[], sourceIndex: number, targetIndex: number) {
   dragData.value = rows
-  orderText.value = rows.map((row) => row.name).join(' → ')
+  orderText.value = `${sourceIndex} → ${targetIndex}：${rows.map((r) => r.name).join(' → ')}`
+}
+
+// 当前列宽（演示 v-model:columns 的回写确实发生了）
+const widths = ref('')
+function onColumnsUpdate(next: G3TableColumn<TableRow>[]) {
+  columns.value = next
+  widths.value = next
+    .filter((c) => c.dataIndex !== 'op')
+    .map((c) => `${c.title}=${c.width ?? 'auto'}`)
+    .join(' · ')
 }
 </script>
 
 <template>
   <div>
-    <p style="margin: 0 0 8px; color: #666; font-size: 13px">
-      拖动表头分隔线改列宽、拖表头文字改列序。
+    <p style="margin: 0 0 8px; color: #999; font-size: 12px">
+      拖动表头分隔线改列宽、拖动表头文字改列序。「操作」列设了 resizable: false，拖不动。
     </p>
-    <div style="height: 240px">
-      <G3Table v-model:columns="columns" :data-source="data" :row-selection="null" />
+    <p style="margin: 0 0 8px; color: #666; font-size: 13px">
+      回写后的列宽：{{ widths || '（拖一下试试）' }}
+    </p>
+    <div style="height: 220px">
+      <G3Table :columns="columns" :data-source="data" @update:columns="onColumnsUpdate" />
+    </div>
+
+    <p style="margin: 16px 0 8px; color: #999; font-size: 12px">
+      按列禁用拖宽：用 colResizable 的 disabled(col) 回调。
+    </p>
+    <div style="height: 180px">
+      <G3Table
+        v-model:columns="columnsByConfig"
+        :data-source="data"
+        :seq="false"
+        :col-resizable="{ disabled: (col) => col.dataIndex === 'amount' }"
+      />
     </div>
 
     <p style="margin: 16px 0 8px; color: #666; font-size: 13px">