u

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { G3Table } from '@g3soft/ui'
+import type { G3TableColumn, TableRow } from '@g3soft/ui'
+
+// 列宽 / 列序拖拽与「列定义回写」：
+// 两者都要求用 v-model: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 后不可拖宽
+  { dataIndex: 'op', title: '操作', width: 100, resizable: false },
+])
+
+// 行拖拽排序：开启后显示拖拽手柄，拖完通过 row-order-change 回传新顺序
+const dragColumns = ref<G3TableColumn<TableRow>[]>([
+  { dataIndex: 'name', title: '名称' },
+  { dataIndex: 'amount', title: '金额', align: 'right' },
+])
+
+const data = ref<TableRow[]>([
+  { id: 1, name: '框架合同', amount: 120000, owner: '张三', op: '—' },
+  { id: 2, name: '采购订单', amount: 86000, owner: '李四', op: '—' },
+  { id: 3, name: '验收单', amount: 43000, owner: '王五', op: '—' },
+])
+
+const dragData = ref<TableRow[]>([
+  { id: 1, name: '第一步', amount: 100 },
+  { id: 2, name: '第二步', amount: 200 },
+  { id: 3, name: '第三步', amount: 300 },
+])
+
+const orderText = ref('')
+
+function onRowOrderChange(rows: TableRow[]) {
+  dragData.value = rows
+  orderText.value = rows.map((row) => row.name).join(' → ')
+}
+</script>
+
+<template>
+  <div>
+    <p style="margin: 0 0 8px; color: #666; font-size: 13px">
+      拖动表头分隔线改列宽、拖表头文字改列序。
+    </p>
+    <div style="height: 240px">
+      <G3Table v-model:columns="columns" :data-source="data" :row-selection="null" />
+    </div>
+
+    <p style="margin: 16px 0 8px; color: #666; font-size: 13px">
+      行拖拽排序：{{ orderText || '（拖动左侧手柄试试）' }}
+    </p>
+    <div style="height: 200px">
+      <G3Table
+        v-model:columns="dragColumns"
+        :data-source="dragData"
+        :seq="false"
+        row-draggable
+        @row-order-change="onRowOrderChange"
+      />
+    </div>
+  </div>
+</template>