Skip to content

Commit 285076b

Browse files
author
liyuan-meng
committed
✨[Tree][TreeSelect]支持线性样式
1 parent 1163483 commit 285076b

9 files changed

Lines changed: 531 additions & 8 deletions

File tree

‎src/components/tree-select/demos/line.md‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
---
2+
order: 2
3+
title: 多层单选与多选
4+
desc: 与Tree结合的树下拉
5+
---
6+
7+
```jsx
8+
import React from 'react';
9+
import { TreeSelect } from 'cloud-react';
10+
11+
class TreeSelectDemo extends React.Component {
12+
treeData = [
13+
{
14+
id: 11,
15+
name: '禁止删除节点',
16+
pId: 1,
17+
disableRemove: true,
18+
children: [
19+
{
20+
id: 113,
21+
name: '删除三个',
22+
pId: 11,
23+
children: [
24+
{
25+
id: 1131,
26+
name: '禁止删除节点31',
27+
pId: 113,
28+
children: []
29+
},
30+
{
31+
id: 1132,
32+
name: '禁止删除节点32',
33+
pId: 113,
34+
children: [
35+
{
36+
id: 11321,
37+
name: '禁止删除节点321',
38+
pId: 1132,
39+
children: []
40+
}
41+
]
42+
}
43+
]
44+
},
45+
{
46+
id: 114,
47+
name: '禁止删除节点4',
48+
pId: 11,
49+
children: []
50+
}
51+
]
52+
},
53+
{
54+
id: 14,
55+
name: '未分类',
56+
pId: 1,
57+
disableRemove: true,
58+
disableAdd: true,
59+
disableRename: true,
60+
children: []
61+
}
62+
];
63+
64+
constructor(props) {
65+
super(props);
66+
67+
this.state = {
68+
selectedNodes: [
69+
{
70+
id: 11321,
71+
name: '禁止删除节点321',
72+
pId: 1132,
73+
children: []
74+
}
75+
],
76+
confirmNodes: [],
77+
singleNodes: [
78+
{
79+
id: 11321,
80+
name: '禁止删除节点321',
81+
pId: 1132,
82+
children: []
83+
}
84+
]
85+
};
86+
setTimeout(() => {
87+
this.setState({
88+
confirmNodes: [this.treeData[0]]
89+
});
90+
}, 1000);
91+
92+
}
93+
94+
handleChange = (node, selectedNodes) => {
95+
console.log(node, selectedNodes);
96+
97+
this.setState({
98+
selectedNodes
99+
});
100+
};
101+
102+
handleConfirmChange = (node, selectedNodes) => {
103+
console.log(node, selectedNodes);
104+
105+
this.setState({
106+
confirmNodes: selectedNodes
107+
});
108+
};
109+
110+
onOk = (node, selectedNodes) => {
111+
console.log(node, selectedNodes);
112+
113+
this.setState({
114+
confirmNodes: selectedNodes
115+
});
116+
};
117+
118+
onChangeSingle = (node, selectedNodes) => {
119+
console.log(node, selectedNodes);
120+
121+
this.setState({
122+
singleNodes: selectedNodes
123+
});
124+
};
125+
126+
render() {
127+
return (
128+
<div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
129+
<div>
130+
<h5>单选</h5>
131+
<TreeSelect
132+
showLine
133+
lineType="dashed"
134+
searchable
135+
searchInBox
136+
allowClear
137+
type="single"
138+
isUnfold
139+
containParentNode
140+
placeholder="选择一个选项"
141+
style={{ width: 420, maxWidth: 420 }}
142+
dropdownStyle={{ maxWidth: 420 }}
143+
dataSource={this.treeData}
144+
value={this.state.singleNodes}
145+
onChange={this.onChangeSingle}
146+
/>
147+
</div>
148+
<div>
149+
<h5>多选</h5>
150+
<TreeSelect
151+
showLine
152+
searchable
153+
searchInBox
154+
allowClear
155+
type="multiple"
156+
isUnfold
157+
containParentNode
158+
placeholder="选择一个选项"
159+
style={{ width: 420, maxWidth: 420 }}
160+
dropdownStyle={{ maxWidth: 420 }}
161+
dataSource={this.treeData}
162+
value={this.state.selectedNodes}
163+
onChange={this.handleChange}
164+
/>
165+
</div>
166+
</div>
167+
);
168+
}
169+
}
170+
171+
export default TreeSelectDemo;
172+
```

‎src/components/tree-select/index.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ group:
4545
| showPath | 展示路径（和 动态加载数据 isDynamicLoad 无法同时使用） | bool | false |
4646
| onLoadData | 动态加载数据 | Function | - |
4747
| isDynamicLoad | 动态加载数据 | bool | false |
48+
| showLine | 线性样式 | bool | false |
49+
| lineType | 线性样式 `default` `dashed` | string | `default` |
4850

4951
#### `single = true`，单选下拉树时候支持的配置
5052
| 属性 | 说明 | 类型 | 默认值 |
@@ -88,3 +90,6 @@ group:
8890

8991
### 动态加载节点
9092
<embed src="@components/tree-select/demos/dynamicLoad.md" />
93+
94+
### 线性样式
95+
<embed src="@components/tree-select/demos/line.md" />

‎src/components/tree/demos/dynamicLoad.md‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,6 @@ desc: 支持搜索节点、右键菜单、最大层级为4、节点名称最大
55
---
66

77
```jsx
8-
9-
/**
10-
* title: 基础用法
11-
* desc: 支持搜索节点、右键菜单、最大层级为4、节点名称最大长度20、可搜索关键字长度最大为20个字符、新增节点加到当前节点的子节点末尾，展开全部节点
12-
*/
138
import React from 'react';
149
import { Tree, Modal } from 'cloud-react';
1510

0 commit comments

Comments
 (0)