/
demo16.js
102 lines (94 loc) · 2 KB
/
demo16.js
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import React, { Component } from 'react'
import { Table, Button, Dialog, Checkbox } from '@alicloud/console-components'
const { Group } = Checkbox
const dataSource = () => {
const result = []
for (let i = 0; i < 5; i++) {
result.push({
title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,
id: 100306660940 + i,
time: 2000 + i,
})
}
return result
}
const cols = [
{
title: 'id',
dataIndex: 'id',
},
{
title: 'Title',
dataIndex: 'title',
},
{
title: 'Time',
dataIndex: 'time',
},
]
export default class Demo16 extends React.Component {
constructor(props) {
super(props)
this.state = {
dataSource: dataSource(),
cols,
}
}
openDialog = () => {
Dialog.alert({
content: this.renderControlContent(),
title: 'Select columns',
onOk: () => {
this.setState({
cols: this.changedCols || this.state.cols,
})
return true
},
})
}
renderControlContent() {
const groupSource = cols.map(col => {
return {
label: col.title,
value: col.dataIndex,
}
})
const defaultValue = this.state.cols.map(col => col.dataIndex)
return (
<Group
dataSource={groupSource}
onChange={this.onChange}
defaultValue={defaultValue}
/>
)
}
onChange = value => {
this.changedCols = cols.filter(col => value.indexOf(col.dataIndex) > -1)
}
renderCols() {
const { cols } = this.state
return cols.map(col => {
return (
<Table.Column
title={col.title}
dataIndex={col.dataIndex}
key={col.dataIndex}
/>
)
})
}
render() {
return (
<div>
<p>
<Button onClick={this.openDialog}> Select columns </Button>
</p>
<Table dataSource={this.state.dataSource}>{this.renderCols()}</Table>
</div>
)
}
}
export const demoMeta = {
zhName: `定制列`,
zhDesc: `定制显示的表格列数`,
}