100 lines
3.8 KiB
Vue
100 lines
3.8 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { G3Table } from '@g3soft/ui'
|
||
import type { G3TableColumn, TableRow } from '@g3soft/ui'
|
||
|
||
// 列宽 / 列序拖拽要求用 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 —— 它的宽度由内容决定，拖了不会落库、列一重建就丢。
|
||
// 也可以在 colResizable 里用 disabled(col) 按列禁用。
|
||
{ dataIndex: 'op', title: '操作', width: 100, resizable: false },
|
||
])
|
||
|
||
// 按列禁用拖宽的另一种写法：整列标成 noResize。
|
||
const columnsByConfig = ref<G3TableColumn<TableRow>[]>([
|
||
{ dataIndex: 'name', title: '名称', width: 180 },
|
||
{ dataIndex: 'amount', title: '金额（禁用拖宽）', width: 160, 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: '—' },
|
||
])
|
||
|
||
// ── 行拖拽排序 ──
|
||
// 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 },
|
||
])
|
||
|
||
const orderText = ref('')
|
||
|
||
function onRowOrderChange(rows: TableRow[], sourceIndex: number, targetIndex: number) {
|
||
dragData.value = rows
|
||
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: #999; font-size: 12px">
|
||
拖动表头分隔线改列宽、拖动表头文字改列序。「操作」列设了 resizable: false，拖不动。
|
||
</p>
|
||
<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">
|
||
行拖拽排序：{{ 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>
|