ant-design-vue中的a-tree-select使用

Ant-Design官网

a-tree-select 支持单选、多选的下拉树形选择

a-tree-select

示例:

1
2
3
4
5
6
7
8
9
<a-tree-select
style="width:100%"
:dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
:treeData="treeData"
v-model="model.parentId"
placeholder="请选择父级菜单"
:disabled="disableSubmit"
@change="handleParentIdChange">
</a-tree-select>

标准结构(源码中都有,可以直接看到)

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
/**
* Whether allow clear
* @default false
* @type boolean
*/
allowClear: boolean;

defaultValue: TreeNodeValue;

/**
* Disabled or not
* @default false
* @type boolean
*/
disabled: boolean;

/**
* className of dropdown menu
* @type string
*/
dropdownClassName: string;

/**
* Determine whether the dropdown menu and the select input are the same width
* @default true
* @type boolean
*/
dropdownMatchSelectWidth: boolean;

/**
* To set the style of the dropdown menu
* @type object
*/
dropdownStyle: object;

/**
* Whether to filter treeNodes by input value. The value of treeNodeFilterProp is used for filtering by default.
* @default Function
* @type boolean | Function
*/
filterTreeNode: boolean | Function;

/**
* To set the container of the dropdown menu.
* The default is to create a div element in body, you can reset it to the scrolling area and make a relative reposition.
* @default () => document.body
* @type Function
*/
getPopupContainer: (triggerNode: any) => HTMLElement;

/**
* whether to embed label in value, turn the format of value from string to {value: string, label: VNode, halfChecked: string[]}
* @default false
* @type boolean
*/
labelInValue: boolean;

/**
* Load data asynchronously.
* @type
*/
loadData: (node: any) => void;

maxTagCount: number;

maxTagPlaceholder: any;

/**
* Support multiple or not, will be true when enable treeCheckable.
* @default false
* @type boolean
*/
multiple: boolean;

/**
* Placeholder of the select input
* @type any (string | slot)
*/
placeholder: any;

/**
* Placeholder of the search input
* @type any (string | slot)
*/
searchPlaceholder: any;

/**
* work with `search` event to make search value controlled.
* @type string
*/
searchValue: string;

/**
* Show Checked Strategy
* @description The way show selected item in box. Default: just show child nodes.
* TreeSelect.SHOW_ALL: show all checked treeNodes (include parent treeNode).
* TreeSelect.SHOW_PARENT: show checked treeNodes (just show parent treeNode).
* @default TreeSelect.SHOW_CHILD
* @type
*/
showCheckedStrategy: 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD';

/**
* Whether to display a search input in the dropdown menu(valid only in the single mode)
* @default false
* @type boolean
*/
showSearch: boolean;

/**
* To set the size of the select input, options: large small
* @default 'default'
* @type string
*/
size: 'small' | 'large' | 'default';

/**
* Whether to show checkbox on the treeNodes
* @default false
* @type boolean
*/
treeCheckable: boolean;

/**
* Whether to check nodes precisely (in the checkable mode), means parent and
* child nodes are not associated, and it will make labelInValue be true
* @default false
* @type boolean
*/
treeCheckStrictly: boolean;

/**
* Data of the treeNodes, manual construction work is no longer needed
* if this property has been set(ensure the Uniqueness of each value)
* @default []
* @type object[]
*/
treeData: TreeData[];

/**
* Enable simple mode of treeData.
* (treeData should like this: [{id:1, pId:0, value:'1', label:"test1",...},...], pId is parent node's id)
* @default false
* @type boolean | object[]
*/
treeDataSimpleMode:
| boolean
| Array<{
id: string;
pId: string;
rootPId: any;
}>;

/**
* Whether to expand all treeNodes by default
* @default false
* @type boolean
*/
treeDefaultExpandAll: boolean;

/**
* Default expanded treeNodes
* @type string[] | number[]
*/
treeDefaultExpandedKeys: string[] | number[];

/**
* Set expanded keys
* @type string[] | number[]
*/
treeExpandedKeys: string[] | number[];

/**
* Will be used for filtering if filterTreeNode returns true
* @default 'value'
* @type string
*/
treeNodeFilterProp: string;

/**
* Will render as content of select
* @default 'title'
* @type string
*/
treeNodeLabelProp: string;

value: TreeNodeValue;

/**
* The custom suffix icon
* @type any (VNode | slot)
*/
suffixIcon: any;

removeIcon?: any;

clearIcon?: any;

/**
* remove focus
*/
blur(): void;

/**
* get focus
*/
focus(): void;

treeData数据格式

示例

1
2
3
4
5
[
{key: '', value: '', title: ''}
,{key: 'id', value: 'id', title: '状态1'}
,{key: 'id2', value: 'id2', title: '状态2'}
]

标准结构

1
2
3
4
5
6
7
8
9
{
key: string | number;
value: string;
label: any;
children: any;
disabled?: boolean;
disableCheckbox?: boolean;
selectable?: boolean;
}

本文地址:ant-design-vue中的a-select设置只读

本文地址: https://github.com/maxzhao-it/blog/post/54598/