48 lines
1.5 KiB
Vue
48 lines
1.5 KiB
Vue
<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>
|