46 lines
1.4 KiB
Vue
46 lines
1.4 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { G3Table } from '@g3soft/ui'
|
||
import type { G3TableColumn, TableRow } from '@g3soft/ui'
|
||
|
||
// 多选：传 rowSelection 即在最前注入选择列。
|
||
// getCheckboxProps 可禁用个别行（禁用行不参与「全选」的分母）。
|
||
const columns: G3TableColumn<TableRow>[] = [
|
||
{ dataIndex: 'name', title: '名称', width: 180 },
|
||
{ dataIndex: 'amount', title: '金额', width: 120, align: 'right' },
|
||
]
|
||
|
||
const data: TableRow[] = [
|
||
{ id: 1, name: '框架合同', amount: 120000 },
|
||
{ id: 2, name: '采购订单', amount: 86000, locked: true },
|
||
{ id: 3, name: '验收单', amount: 43000 },
|
||
]
|
||
|
||
const selectedRowKeys = ref<Array<string | number>>([])
|
||
const selectedText = ref('')
|
||
|
||
function onSelectionChange(keys: Array<string | number>, rows: TableRow[]) {
|
||
selectedRowKeys.value = keys
|
||
selectedText.value = rows.map((row) => row.name).join('、')
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<p style="margin: 0 0 8px; color: #666; font-size: 13px">
|
||
已选：{{ selectedText || '（无）' }}
|
||
</p>
|
||
<div style="height: 260px">
|
||
<G3Table
|
||
:columns="columns"
|
||
:data-source="data"
|
||
:row-selection="{
|
||
selectedRowKeys,
|
||
onChange: onSelectionChange,
|
||
getCheckboxProps: (row) => ({ disabled: Boolean(row.locked) }),
|
||
}"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|