52 lines
1.8 KiB
Vue
52 lines
1.8 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { G3Table } from '@g3soft/ui'
|
||
import type { G3TableColumn, TableRow } from '@g3soft/ui'
|
||
|
||
// 多选：传 rowSelection 即在最前注入选择列。
|
||
// - selectedRowKeys 用 v-model 式双向绑定，勾选变化会回写
|
||
// - getCheckboxProps 可禁用个别行；**禁用行不计入「全选」的分母**
|
||
// （所以下面表格里表头全选只会选中 2 行）
|
||
const columns: G3TableColumn<TableRow>[] = [
|
||
{ dataIndex: 'name', title: '名称', width: 180 },
|
||
{ dataIndex: 'amount', title: '金额', width: 120, align: 'right' },
|
||
{ dataIndex: 'owner', title: '负责人', width: 120 },
|
||
]
|
||
|
||
const data: TableRow[] = [
|
||
{ id: 1, name: '框架合同', amount: 120000, owner: '张三' },
|
||
{ id: 2, name: '采购订单', amount: 86000, owner: '李四', locked: true },
|
||
{ id: 3, name: '验收单', amount: 43000, owner: '王五' },
|
||
]
|
||
|
||
const selectedRowKeys = ref<Array<string | number>>([])
|
||
const selectedNames = ref<string[]>([])
|
||
|
||
function onSelectionChange(keys: Array<string | number>, rows: TableRow[]) {
|
||
selectedRowKeys.value = keys
|
||
selectedNames.value = rows.map((row) => String(row.name))
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<p style="margin: 0 0 8px; color: #666; font-size: 13px">
|
||
已选 {{ selectedRowKeys.length }} 项：{{ selectedNames.join('、') || '（无）' }}
|
||
</p>
|
||
<p style="margin: 0 0 8px; color: #999; font-size: 12px">
|
||
「采购订单」被 getCheckboxProps 禁用，不参与全选。
|
||
</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>
|