-
Notifications
You must be signed in to change notification settings - Fork 138
/
Selectable.vue
83 lines (75 loc) 路 1.78 KB
/
Selectable.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<template>
<IxSpace vertical block>
<IxSpace align="center">
<IxRadioGroup v-model:value="selectableColumn.trigger">
<IxRadio value="click">Click</IxRadio>
<IxRadio value="dblclick">DblClick</IxRadio>
</IxRadioGroup>
<IxSwitch v-model:checked="selectableColumn.multiple" :labels="['Multiple', 'Multiple']"></IxSwitch>
<IxSwitch v-model:checked="selectableColumn.showIndex" :labels="['Index', 'Index']"></IxSwitch>
</IxSpace>
<IxTable v-model:selectedRowKeys="selectedRowKeys" :columns="columns" :dataSource="data" :pagination="false">
</IxTable>
</IxSpace>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { TableColumn } from '@idux/components/table'
import { TableColumnSelectable } from '../src/types'
interface Data {
key: number
name: string
age: number
address: string
}
const selectedRowKeys = ref([1])
const selectableColumn = reactive<TableColumnSelectable<Data>>({
type: 'selectable',
align: 'center',
disabled: record => record.key === 4,
multiple: true,
showIndex: false,
onChange: (selectedKeys, selectedRows) => console.log(selectedKeys, selectedRows),
})
const columns: TableColumn<Data>[] = [
selectableColumn,
{
title: 'Name',
dataKey: 'name',
},
{
title: 'Age',
dataKey: 'age',
},
{
title: 'Address',
dataKey: 'address',
},
]
const data: Data[] = [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: 2,
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: 3,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: 4,
name: 'Disabled User',
age: 99,
address: 'Sidney No. 1 Lake Park',
},
]
</script>