u

code/g3soft-libs/docs/examples/table/selection.vue

@@ -0,0 +1,45 @@
+<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>