66 lines
2.2 KiB
Vue
66 lines
2.2 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 绑定，否则组件拖完无处回写（松手回弹），
|
||
// 组件检测到没绑定会直接关掉这两个功能。
|
||
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>
|