u
This commit is contained in:
oneao committed
1 parent
78eb811ff7
commit
97fe2ff306
83 files changed
+10083
-3662
No files matched your search
@@ -0,0 +1,47 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { Pencil, Trash2 } from '@lucide/vue'
|
||||
import { G3Message, G3Table } from '@g3soft/ui'
|
||||
import type { G3TableColumn, TableRow } from '@g3soft/ui'
|
||||
|
||||
// 操作列：列上加 actions 即可，渲染成一排小按钮。
|
||||
// - type: 'more' 的项会收进「更多」下拉（这里没配，全部内联显示）
|
||||
// - confirm 给字符串或对象时先弹确认框，确认后才执行 onClick
|
||||
// - 操作列建议显式写 resizable: false（宽度由内容决定，拖了不落库）
|
||||
const columns: G3TableColumn<TableRow>[] = [
|
||||
{ dataIndex: 'name', title: '名称', width: 180 },
|
||||
{ dataIndex: 'amount', title: '金额', width: 120, align: 'right' },
|
||||
{
|
||||
dataIndex: 'op',
|
||||
title: '操作',
|
||||
width: 160,
|
||||
resizable: false,
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
icon: Pencil,
|
||||
onClick: (row) => G3Message.info(`编辑：${row.name}`),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
icon: Trash2,
|
||||
type: 'danger',
|
||||
confirm: { title: '确认删除', description: '删除后不可恢复，确定继续吗？' },
|
||||
onClick: (row) => G3Message.success(`已删除：${row.name}`),
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const data = ref<TableRow[]>([
|
||||
{ id: 1, name: '框架合同', amount: 120000 },
|
||||
{ id: 2, name: '采购订单', amount: 86000 },
|
||||
{ id: 3, name: '验收单', amount: 43000 },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="height: 260px">
|
||||
<G3Table :columns="columns" :data-source="data" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { G3Table } from '@g3soft/ui'
|
||||
import type { G3TableColumn, TableRow } from '@g3soft/ui'
|
||||
|
||||
// 列定义：dataIndex 指向行数据的字段
|
||||
const columns: G3TableColumn<TableRow>[] = [
|
||||
{ dataIndex: 'name', title: '名称', width: 180 },
|
||||
{ dataIndex: 'amount', title: '金额', width: 120, align: 'right' },
|
||||
{ dataIndex: 'owner', title: '负责人' },
|
||||
]
|
||||
|
||||
// seq 默认开启（最前面的序号列），bordered 默认 true
|
||||
const data = ref<TableRow[]>([
|
||||
{ id: 1, name: '框架合同', amount: 120000, owner: '张三' },
|
||||
{ id: 2, name: '采购订单', amount: 86000, owner: '李四' },
|
||||
{ id: 3, name: '验收单', amount: 43000, owner: '王五' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="height: 260px">
|
||||
<G3Table :columns="columns" :data-source="data" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { G3Table } from '@g3soft/ui'
|
||||
import type { G3TableColumn, TableRow } from '@g3soft/ui'
|
||||
|
||||
// 行内编辑：列上加 editor 即可。
|
||||
// 单击单元格进入编辑；Enter 确认、Esc 取消。值变化通过 change 事件抛出。
|
||||
//
|
||||
// 编辑器类型：text / number / textarea / select / checkbox
|
||||
// checkbox 约定 1 = 选中、0 = 未选中（与后端 tinyint 对齐）。
|
||||
const columns: G3TableColumn<TableRow>[] = [
|
||||
{ dataIndex: 'name', title: '名称', width: 200, editor: { type: 'text' } },
|
||||
{
|
||||
dataIndex: 'status',
|
||||
title: '状态',
|
||||
width: 140,
|
||||
editor: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '停用', value: 0 },
|
||||
],
|
||||
},
|
||||
},
|
||||
{ dataIndex: 'enabled', title: '启用', width: 80, editor: { type: 'checkbox' } },
|
||||
{ dataIndex: 'qty', title: '数量', width: 120, align: 'right', editor: { type: 'number' } },
|
||||
]
|
||||
|
||||
const data = ref<TableRow[]>([
|
||||
{ id: 1, name: '框架合同', status: 1, enabled: 1, qty: 12 },
|
||||
{ id: 2, name: '采购订单', status: 0, enabled: 0, qty: 45 },
|
||||
])
|
||||
|
||||
const lastChange = ref('')
|
||||
|
||||
function onChange(row: TableRow, col: G3TableColumn<TableRow>, value: unknown) {
|
||||
lastChange.value = `${row.name} 的「${col.title}」改为 ${value}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p style="margin: 0 0 8px; color: #666; font-size: 13px">
|
||||
最近一次修改：{{ lastChange || '（点击单元格试试）' }}
|
||||
</p>
|
||||
<div style="height: 240px">
|
||||
<G3Table :columns="columns" :data-source="data" :seq="false" @change="onChange" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { G3Table } from '@g3soft/ui'
|
||||
import type { G3TableColumn, TableRow } from '@g3soft/ui'
|
||||
|
||||
// 多选：传 rowSelection 即在最前注入选择列。
|
||||
// getCheckboxProps 可禁用个别行（禁用行不参与「全选」的分母）。
|
||||
const columns: G3TableColumn<TableRow>[] = [
|
||||
{ dataIndex: 'name', title: '名称', width: 180 },
|
||||
{ dataIndex: 'amount', title: '金额', width: 120, align: 'right' },
|
||||
]
|
||||
|
||||
const data: TableRow[] = [
|
||||
{ id: 1, name: '框架合同', amount: 120000 },
|
||||
{ id: 2, name: '采购订单', amount: 86000, locked: true },
|
||||
{ id: 3, name: '验收单', amount: 43000 },
|
||||
]
|
||||
|
||||
const selectedRowKeys = ref<Array<string | number>>([])
|
||||
const selectedText = ref('')
|
||||
|
||||
function onSelectionChange(keys: Array<string | number>, rows: TableRow[]) {
|
||||
selectedRowKeys.value = keys
|
||||
selectedText.value = rows.map((row) => row.name).join('、')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p style="margin: 0 0 8px; color: #666; font-size: 13px">
|
||||
已选：{{ selectedText || '（无）' }}
|
||||
</p>
|
||||
<div style="height: 260px">
|
||||
<G3Table
|
||||
:columns="columns"
|
||||
:data-source="data"
|
||||
:row-selection="{
|
||||
selectedRowKeys,
|
||||
onChange: onSelectionChange,
|
||||
getCheckboxProps: (row) => ({ disabled: Boolean(row.locked) }),
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { G3Table } from '@g3soft/ui'
|
||||
import type { G3TableColumn, TableRow } from '@g3soft/ui'
|
||||
|
||||
// 排序：列上加 sorter: true 即可点表头排序（组件内排，不请求接口）。
|
||||
// sortType 决定按数字还是字符串比较，默认按字符串。
|
||||
const columns: G3TableColumn<TableRow>[] = [
|
||||
{ dataIndex: 'name', title: '名称', width: 180 },
|
||||
{ dataIndex: 'amount', title: '金额', width: 140, align: 'right', sorter: true, sortType: 'number' },
|
||||
{ dataIndex: 'qty', title: '数量', width: 120, align: 'right', sorter: true, sortType: 'number' },
|
||||
]
|
||||
|
||||
const data = ref<TableRow[]>([
|
||||
{ id: 1, name: '框架合同', amount: 120000, qty: 12 },
|
||||
{ id: 2, name: '采购订单', amount: 86000, qty: 45 },
|
||||
{ id: 3, name: '验收单', amount: 43000, qty: 7 },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="height: 260px">
|
||||
<G3Table :columns="columns" :data-source="data" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { G3Table } from '@g3soft/ui'
|
||||
import type { G3TableColumn, TableRow } from '@g3soft/ui'
|
||||
|
||||
// 性能门控：行数超过 100 才开启纵向虚拟滚动。
|
||||
// 组件内部按 dataSource.length 自动判断，业务不需要手动切换 virtual。
|
||||
const rowCount = ref(5000)
|
||||
const virtualColumns: G3TableColumn<TableRow>[] = [
|
||||
{ dataIndex: 'id', title: 'ID', width: 90 },
|
||||
{ dataIndex: 'name', title: '名称', width: 200 },
|
||||
{ dataIndex: 'value', title: '数值', width: 140, align: 'right' },
|
||||
]
|
||||
|
||||
const virtualData = computed(() =>
|
||||
Array.from({ length: rowCount.value }, (_, i) => ({
|
||||
id: i + 1,
|
||||
name: `记录 ${i + 1}`,
|
||||
value: (i + 1) * 7,
|
||||
})),
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p style="margin: 0 0 8px; color: #666; font-size: 13px">
|
||||
当前 {{ rowCount }} 行 → {{ rowCount > 100 ? '已开启' : '未开启（行数不足 100 时全量渲染）' }}纵向虚拟滚动
|
||||
</p>
|
||||
<div style="height: 320px">
|
||||
<G3Table :columns="virtualColumns" :data-source="virtualData" :seq="false" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in new issue
Block a user