51 lines
1.6 KiB
Vue
51 lines
1.6 KiB
Vue
<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>
|