31 lines
1.2 KiB
Vue
31 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { G3Table } from '@g3soft/ui'
|
|
import type { G3TableColumn, TableRow } from '@g3soft/ui'
|
|
|
|
// 最小用法：给 columns 与 dataSource 两份数据即可。
|
|
// - seq 默认开启，会在最前列注入序号列
|
|
// - bordered 默认开启，边框由底座（stk-table-vue）绘制
|
|
// - 没写 width 的列会自动摊掉剩余宽度
|
|
// - 本例额外开了 `stripe`（斑马纹，默认关）：注意**序号列也带条纹** ——
|
|
// 冻结列的底色必须不透明（否则横滚时被压住的内容会透字），
|
|
// 组件在冻结列上补了一层同色内阴影把条纹接上，业务不用管。
|
|
const columns: G3TableColumn<TableRow>[] = [
|
|
{ dataIndex: 'name', title: '名称', width: 180 },
|
|
{ dataIndex: 'amount', title: '金额', width: 120, align: 'right' },
|
|
{ dataIndex: 'owner', title: '负责人' },
|
|
]
|
|
|
|
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" stripe />
|
|
</div>
|
|
</template>
|