91 lines
3.7 KiB
Vue
91 lines
3.7 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 取消。
|
||
//
|
||
// 编辑器类型：
|
||
// text / number / password / textarea → 用 G3Input 渲染
|
||
// select → 用 G3Select 渲染；options 可传数组，也可传「接收当前行的函数」
|
||
// checkbox → 点击即切换，无需先激活整行；约定 1 = 选中、0 = 未选中（对齐后端 tinyint）
|
||
//
|
||
// 形态（editorSeamless，默认 true）：**单元格内无外间距 + 编辑器无常驻边框**。
|
||
// 编辑器整格铺满、融进表格，只有焦点（格内主色环）、hover（极淡填充）
|
||
// 和校验（红色文字）才出现视觉提示——这是整行编辑 / 键盘连续录入 /
|
||
// 固定列宽 / 专业用户（Excel、AG Grid）的表格态。
|
||
// 传 :editor-seamless="false" 则回到「格内留一圈间距 + 自身描边」的悬浮卡片观感。
|
||
// 两种形态下编辑器的盒高都等于行高，切换不会改变行高、也不会让同行其它格跳动。
|
||
//
|
||
// 关键行为：输入值先写进内部草稿，**失焦才落库并抛出 change**。
|
||
// 这样每敲一个字符不会触发父级重渲染（否则光标会丢、输入法会断）。
|
||
const columns: G3TableColumn<TableRow>[] = [
|
||
{ dataIndex: 'name', title: '名称', width: 200, editor: { type: 'text' } },
|
||
{
|
||
dataIndex: 'status',
|
||
title: '状态（select）',
|
||
width: 150,
|
||
editor: {
|
||
type: 'select',
|
||
options: [
|
||
{ label: '启用', value: 1 },
|
||
{ label: '停用', value: 0 },
|
||
],
|
||
},
|
||
},
|
||
{ dataIndex: 'enabled', title: '启用', width: 80, editor: { type: 'checkbox' } },
|
||
{ dataIndex: 'qty', title: '数量（number）', width: 140, align: 'right', editor: { type: 'number' } },
|
||
{
|
||
dataIndex: 'remark',
|
||
title: '备注（textarea）',
|
||
width: 180,
|
||
editor: { type: 'textarea' },
|
||
},
|
||
{
|
||
dataIndex: 'owner',
|
||
title: '负责人（options 依赖本行）',
|
||
width: 200,
|
||
// options 传函数时会收到当前行 —— 按「状态」给出不同候选人。
|
||
// 注意这类列在非编辑态会把值解析成 label 展示。
|
||
editor: {
|
||
type: 'select',
|
||
options: (row: TableRow) =>
|
||
row.status === 1
|
||
? [
|
||
{ label: '张三', value: '张三' },
|
||
{ label: '李四', value: '李四' },
|
||
]
|
||
: [{ label: '王五', value: '王五' }],
|
||
},
|
||
},
|
||
]
|
||
|
||
const data = ref<TableRow[]>([
|
||
{ id: 1, name: '框架合同', status: 1, enabled: 1, qty: 12, remark: '年度框架', owner: '张三' },
|
||
{ id: 2, name: '采购订单', status: 0, enabled: 0, qty: 45, remark: '', owner: '王五' },
|
||
])
|
||
|
||
const lastChange = ref('')
|
||
|
||
function onChange(row: TableRow, col: G3TableColumn<TableRow>, value: unknown) {
|
||
// 只有值**真的变化**才会走到这里（组件内部按编辑前的快照去重），
|
||
// 所以「点进去又点出来」不会产生无意义的 change。
|
||
lastChange.value = `「${row.name}」的「${col.title}」→ ${value}`
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<p style="margin: 0 0 8px; color: #666; font-size: 13px">
|
||
最近一次 change：{{ lastChange || '（点击单元格试试）' }}
|
||
</p>
|
||
<p style="margin: 0 0 8px; color: #999; font-size: 12px">
|
||
单击进入编辑 · Enter 确认 · Esc 取消 · Tab / 方向键可换格 ·
|
||
单元格内无外间距、无常驻边框，焦点时才出现主色焦点环
|
||
</p>
|
||
<div style="height: 240px">
|
||
<G3Table :columns="columns" :data-source="data" :seq="false" @change="onChange" />
|
||
</div>
|
||
</div>
|
||
</template>
|