Files
workspace/code/g3soft-libs/docs/examples/table/basic.vue
T
2026-10-12 17:32:50 +08:00

26 lines
848 B
Vue

<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>