Vue通用下拉树组件@riophae/vue-treeselect的使用

这个是在若依框架无意中发现的一个下拉树通用组件。@riophae/vue-treeselect 是一个基于 Vue.js 的树形选择器组件，可以用于选择树形结构的数据。它支持多选、搜索、异步加载等功能，可以自定义选项的样式和模板。该组件易于使用和扩展，适用于各种类型的项目。

npm：https://www.npmjs.com/package/@riophae/vue-treeselect 

首先安装： 

 使用自己习惯使用的包管理器安装就可以了

pnpm add @riophae/vue-treeselect

引入注册： 

1. import Treeselect from '@riophae/vue-treeselect'
2. import '@riophae/vue-treeselect/dist/vue-treeselect.css'
4. export default {
5. components: { Treeselect }
6. }

基本使用:

3. <script>
4. // import the component
5. import Treeselect from '@riophae/vue-treeselect'
6. // import the styles
7. import '@riophae/vue-treeselect/dist/vue-treeselect.css'
9. export default {
10. // register the component
11. components: { Treeselect },
12. data() {
13. return {
14. // define the default value
15. value: null,
16. // define options
17. options: [ {
18. id: 'a',
19. label: 'a',
20. children: [ {
21. id: 'aa',
22. label: 'aa',
23. }, {
24. id: 'ab',
25. label: 'ab',
26. } ],
27. }, {
28. id: 'b',
29. label: 'b',
30. }, {
31. id: 'c',
32. label: 'c',
33. } ],
34. }
35. },
36. }
37. script>

里面可配置的属性很多，下面是在源码中看到的： 

部分注释百度翻译成中文了，但太多了，懒得挨个翻译了，直接看也大概知道啥意思 

1. props: {
2. /**
3. * 即使有禁用的选定节点，是否允许重置值
4. */
5. allowClearingDisabled: {
6. type: Boolean,
7. default: false,
8. },
10. /**
11. * 选择/取消选择祖先节点时，是否应选择/取消选中其禁用的后代
12. * 和 allowClearingDisabled 一起使用
13. */
14. allowSelectingDisabledDescendants: {
15. type: Boolean,
16. default: false,
17. },
19. /**
20. * 菜单是否应始终打开
21. */
22. alwaysOpen: {
23. type: Boolean,
24. default: false,
25. },
27. /**
28. * 是否将菜单加到body上
29. */
30. appendToBody: {
31. type: Boolean,
32. default: false,
33. },
35. /**
36. * 是否启用异步搜索模式
37. */
38. async: {
39. type: Boolean,
40. default: false,
41. },
43. /**
44. * 是否自动将组件集中在装载上？
45. */
46. autoFocus: {
47. type: Boolean,
48. default: false,
49. },
51. /**
52. * 装载时自动加载根选项。当设置为“false”时，打开菜单时将加载根选项。
53. */
54. autoLoadRootOptions: {
55. type: Boolean,
56. default: true,
57. },
59. /**
60. * 当用户取消选择一个节点时，会自动取消选择其祖先。仅适用于平面模式。
61. */
62. autoDeselectAncestors: {
63. type: Boolean,
64. default: false,
65. },
67. /**
68. * 当用户取消选择节点时，会自动取消选择其子节点。仅适用于平面模式。
69. */
70. autoDeselectDescendants: {
71. type: Boolean,
72. default: false,
73. },
75. /**
76. * 当用户选择一个节点时，会自动选择其祖先。仅适用于平面模式。
77. */
78. autoSelectAncestors: {
79. type: Boolean,
80. default: false,
81. },
83. /**
84. * 当用户选择一个节点时，会自动选择其子节点。仅适用于平面模式。
85. */
86. autoSelectDescendants: {
87. type: Boolean,
88. default: false,
89. },
91. /**
92. * 如果没有文本输入，按退格键是否删除最后一项。
93. */
94. backspaceRemoves: {
95. type: Boolean,
96. default: true,
97. },
99. /**
100. * 在清除所有输入字段之前进行处理的函数。
101. * 返回“false”以防止清除值
102. * @type {function(): (boolean|Promise)}
103. */
104. beforeClearAll: {
105. type: Function,
106. default: constant(true),
107. },
109. /**
110. * 在叶节点之前显示分支节点？
111. */
112. branchNodesFirst: {
113. type: Boolean,
114. default: false,
115. },
117. /**
118. * 是否应该缓存每个搜索请求的结果？
119. */
120. cacheOptions: {
121. type: Boolean,
122. default: true,
123. },
125. /**
126. * 是否显示重置值的“×”按钮？
127. */
128. clearable: {
129. type: Boolean,
130. default: true,
131. },
133. /**
134. * 清楚文本，multiple为true时
135. */
136. clearAllText: {
137. type: String,
138. default: 'Clear all',
139. },
141. /**
142. * 选择后是否清除搜索输入。
143. * 仅当“multiple”为“true”时使用。
144. * 对于单选模式，无论道具值如何，它总是**在选择一个选项后清除输入。
145. */
146. clearOnSelect: {
147. type: Boolean,
148. default: false,
149. },
151. /**
152. * “×”按钮的标题。
153. */
154. clearValueText: {
155. type: String,
156. default: 'Clear value',
157. },
159. /**
160. * 选择选项后是否关闭菜单？
161. * 仅当“multiple”为“true”时使用。
162. */
163. closeOnSelect: {
164. type: Boolean,
165. default: true,
166. },
168. /**
169. * 加载时应自动展开多少级别的分支节点。
170. * 设置Infinity以使所有分支节点在默认情况下展开。
171. */
172. defaultExpandLevel: {
173. type: Number,
174. default: 0,
175. },
177. /**
178. * 在用户开始搜索之前要显示的默认选项集。用于异步搜索模式。
179. * 当设置为“true”时，将自动加载作为空字符串的搜索查询结果。
180. * @type {boolean|node[]}
181. */
182. defaultOptions: {
183. default: false,
184. },
186. /**
187. * 如果没有文本输入，按delete键是否删除最后一项。
188. */
189. deleteRemoves: {
190. type: Boolean,
191. default: true,
192. },
194. /**
195. * 用于连接隐藏字段值的多个值的分隔符。
196. */
197. delimiter: {
198. type: String,
199. default: ',',
200. },
202. /**
203. * 仅显示与搜索值直接匹配的节点，不包括其祖先。
204. *
205. * @type {Object}
206. */
207. flattenSearchResults: {
208. type: Boolean,
209. default: false,
210. },
212. /**
213. * 是否阻止选择分支节点？
214. */
215. disableBranchNodes: {
216. type: Boolean,
217. default: false,
218. },
220. /**
221. * 禁用控制？
222. */
223. disabled: {
224. type: Boolean,
225. default: false,
226. },
228. /**
229. * 是否禁用模糊匹配功能？
230. */
231. disableFuzzyMatching: {
232. type: Boolean,
233. default: false,
234. },
236. /**
237. *是否启用平面模式。非平面模式（默认）是指：
238. * - 每当检查分支节点时，它的所有子节点也将被检查
239. * - 每当一个分支节点检查了所有子节点时，该分支节点本身也会被检查
240. * 设置“true”以禁用此机制
241. */
242. flat: {
243. type: Boolean,
244. default: false,
245. },
247. /**
248. * 将以所有事件作为最后一个参数进行传递。
249. * 有助于识别事件的起源。
250. */
251. instanceId: {
252. // Add two trailing "$" to distinguish from explictly specified ids.
253. default: () => `${instanceId++}$$`,
254. type: [String, Number],
255. },
257. /**
258. * Joins multiple values into a single form field with the `delimiter` (legacy mode).
259. * 使用“分隔符”将多个值合并到一个表单字段中（传统模式）。
260. */
261. joinValues: {
262. type: Boolean,
263. default: false,
264. },
266. /**
267. * 限制所选选项的显示。
268. * 其余部分将隐藏在limitText字符串中。
269. */
270. limit: {
271. type: Number,
272. default: Infinity,
273. },
275. /**
276. * Function that processes the message shown when selected elements pass the defined limit.
277. * @type {function(number): string}
278. */
279. limitText: {
280. type: Function,
281. default: function limitTextDefault(count) { // eslint-disable-line func-name-matching
282. return `and ${count} more`
283. },
284. },
286. /**
287. * Text displayed when loading options.
288. */
289. loadingText: {
290. type: String,
291. default: 'Loading...',
292. },
294. /**
295. * Used for dynamically loading options.
296. * @type {function({action: string, callback: (function((Error|string)=): void), parentNode: node=, instanceId}): void}
297. */
298. loadOptions: {
299. type: Function,
300. },
302. /**
303. * Which node properties to filter on.
304. */
305. matchKeys: {
306. type: Array,
307. default: constant(['label']),
308. },
310. /**
311. * Sets `maxHeight` style value of the menu.
312. */
313. maxHeight: {
314. type: Number,
315. default: 300,
316. },
318. /**
319. * Set `true` to allow selecting multiple options (a.k.a., multi-select mode).
320. */
321. multiple: {
322. type: Boolean,
323. default: false,
324. },
326. /**
327. * Generates a hidden tag with this field name for html forms.
328. */
329. name: {
330. type: String,
331. },
333. /**
334. * Text displayed when a branch node has no children.
335. */
336. noChildrenText: {
337. type: String,
338. default: 'No sub-options.',
339. },
341. /**
342. * Text displayed when there are no available options.
343. */
344. noOptionsText: {
345. type: String,
346. default: 'No options available.',
347. },
349. /**
350. * Text displayed when there are no matching search results.
351. */
352. noResultsText: {
353. type: String,
354. default: 'No results found...',
355. },
357. /**
358. * Used for normalizing source data.
359. * @type {function(node, instanceId): node}
360. */
361. normalizer: {
362. type: Function,
363. default: identity,
364. },
366. /**
367. * By default (`auto`), the menu will open below the control. If there is not
368. * enough space, vue-treeselect will automatically flip the menu.
369. * You can use one of other four options to force the menu to be always opened
370. * to specified direction.
371. * Acceptable values:
372. * - `"auto"`
373. * - `"below"`
374. * - `"bottom"`
375. * - `"above"`
376. * - `"top"`
377. */
378. openDirection: {
379. type: String,
380. default: 'auto',
381. validator(value) {
382. const acceptableValues = ['auto', 'top', 'bottom', 'above', 'below']
383. return includes(acceptableValues, value)
384. },
385. },
387. /**
388. * Whether to automatically open the menu when the control is clicked.
389. */
390. openOnClick: {
391. type: Boolean,
392. default: true,
393. },
395. /**
396. * Whether to automatically open the menu when the control is focused.
397. */
398. openOnFocus: {
399. type: Boolean,
400. default: false,
401. },
403. /**
404. * Array of available options.
405. * @type {node[]}
406. */
407. options: {
408. type: Array,
409. },
411. /**
412. * Field placeholder, displayed when there's no value.
413. */
414. placeholder: {
415. type: String,
416. default: 'Select...',
417. },
419. /**
420. * Applies HTML5 required attribute when needed.
421. */
422. required: {
423. type: Boolean,
424. default: false,
425. },
427. /**
428. * Text displayed asking user whether to retry loading children options.
429. */
430. retryText: {
431. type: String,
432. default: 'Retry?',
433. },
435. /**
436. * Title for the retry button.
437. */
438. retryTitle: {
439. type: String,
440. default: 'Click to retry',
441. },
443. /**
444. * Enable searching feature?
445. */
446. searchable: {
447. type: Boolean,
448. default: true,
449. },
451. /**
452. * Search in ancestor nodes too.
453. */
454. searchNested: {
455. type: Boolean,
456. default: false,
457. },
459. /**
460. * Text tip to prompt for async search.
461. */
462. searchPromptText: {
463. type: String,
464. default: 'Type to search...',
465. },
467. /**
468. * Whether to show a children count next to the label of each branch node.
469. */
470. showCount: {
471. type: Boolean,
472. default: false,
473. },
475. /**
476. * Used in conjunction with `showCount` to specify which type of count number should be displayed.
477. * Acceptable values:
478. * - "ALL_CHILDREN"
479. * - "ALL_DESCENDANTS"
480. * - "LEAF_CHILDREN"
481. * - "LEAF_DESCENDANTS"
482. */
483. showCountOf: {
484. type: String,
485. default: ALL_CHILDREN,
486. validator(value) {
487. const acceptableValues = [ALL_CHILDREN, ALL_DESCENDANTS, LEAF_CHILDREN, LEAF_DESCENDANTS]
488. return includes(acceptableValues, value)
489. },
490. },
492. /**
493. * Whether to show children count when searching.
494. * Fallbacks to the value of `showCount` when not specified.
495. * @type {boolean}
496. */
497. showCountOnSearch: null,
499. /**
500. * In which order the selected options should be displayed in trigger & sorted in `value` array.
501. * Used for multi-select mode only.
502. * Acceptable values:
503. * - "ORDER_SELECTED"
504. * - "LEVEL"
505. * - "INDEX"
506. */
507. sortValueBy: {
508. type: String,
509. default: ORDER_SELECTED,
510. validator(value) {
511. const acceptableValues = [ORDER_SELECTED, LEVEL, INDEX]
512. return includes(acceptableValues, value)
513. },
514. },
516. /**
517. * Tab index of the control.
518. */
519. tabIndex: {
520. type: Number,
521. default: 0,
522. },
524. /**
525. * The value of the control.
526. * Should be `id` or `node` object for single-select mode, or an array of `id` or `node` object for multi-select mode.
527. * Its format depends on the `valueFormat` prop.
528. * For most cases, just use `v-model` instead.
529. * @type {?Array}
530. */
531. value: null,
533. /**
534. * Which kind of nodes should be included in the `value` array in multi-select mode.
535. * Acceptable values:
536. * - "ALL" - Any node that is checked will be included in the `value` array
537. * - "BRANCH_PRIORITY" (default) - If a branch node is checked, all its descendants will be excluded in the `value` array
538. * - "LEAF_PRIORITY" - If a branch node is checked, this node itself and its branch descendants will be excluded from the `value` array but its leaf descendants will be included
539. * - "ALL_WITH_INDETERMINATE" - Any node that is checked will be included in the `value` array, plus indeterminate nodes
540. */
541. valueConsistsOf: {
542. type: String,
543. default: BRANCH_PRIORITY,
544. validator(value) {
545. const acceptableValues = [ALL, BRANCH_PRIORITY, LEAF_PRIORITY, ALL_WITH_INDETERMINATE]
546. return includes(acceptableValues, value)
547. },
548. },
550. /**
551. * Format of `value` prop.
552. * Note that, when set to `"object"`, only `id` & `label` properties are required in each `node` object in `value` prop.
553. * Acceptable values:
554. * - "id"
555. * - "object"
556. */
557. valueFormat: {
558. type: String,
559. default: 'id',
560. },
562. /**
563. * z-index of the menu.
564. */
565. zIndex: {
566. type: [Number, String],
567. default: 999,
568. }
569. }

然后我简单看了一下好像一共向外暴露了6个方法如下：

1. @input // // 选中触发（第一次回显的时候会触发，清除值的时候会触发, value值为undefined） input事件用于v-model双向绑定组件更新父组件值
3. @select // 选中触发（清除值的时候不会触发）
5. @deselect // 移除选项时触发 当设置multiple为true时生效 raw为当前移除的对象
7. @search-change // 搜索触发（输入框输入 值改变时）
9. @open // 展开时触发
11. @close // 关闭时触发

下面是我测试的一个例子，一般的需求应该足够了

字体样式简单调了一下 

2. <script>
3. import Treeselect from '@riophae/vue-treeselect'
4. import '@riophae/vue-treeselect/dist/vue-treeselect.css'
5. import treeData from './data/tree'
6. export default {
7. data() {
8. return {
9. value: null,
10. options: []
11. }
12. },
13. components: { Treeselect },
14. mounted(){
15. // 延迟模拟请求数据
16. setTimeout(() => {
17. this.options = treeData
18. this.value = [111, 113] // 测试回显操作
19. }, 300)
20. },
21. methods:{
22. // 选中触发（第一次回显的时候会触发，清除值的时候会触发, value值为undefined） input事件用于v-model双向绑定组件更新父组件值
23. treeSelectInput(value, instanceId) {
24. console.log(value, 'input事件')
25. console.log(this.value, 'this.value -- input') // 这个不需要 延迟
26. },
27. // 选中触发（清除值的时候不会触发）
28. treeSelectChange(raw, instanceId) {
29. console.log(raw, '当前的对象')
30. setTimeout(() => { // 如果用到this.value 需要setTimeout延迟一下拿到最新的值
31. console.log(this.value, 'this.value -- select')
32. })
33. },
34. // 移除选项时触发 当设置multiple为true时生效 raw为当前移除的对象
35. treeSelectDeselect(raw, instanceId) {
36. console.log(raw, 'deselect-->>')
37. },
38. // 搜索
39. treeSelectSearch(searchQuery, instanceId) {
40. console.log(searchQuery, '当前搜索的值')
41. },
42. // 展开触发
43. treeSelectOpen(instanceId) {
44. console.log('展开了')
45. },
46. // 关闭触发
47. treeSelectClose(value, instanceId) {
48. console.log(value, '当前的value值')
49. },
50. // 字段默认 id label 用于规范化数据源
51. tenantIdnormalizer(node, instanceId) {
52. if (node.children && !node.children.length) {
53. delete node.children
54. }
55. return {
56. id: node.id,
57. label: node.title,
58. children: node.children
59. }
60. }
61. }
62. }
63. script>
64. <style scoped>
65. .main {
66. width: 100%;
67. height: 100%;
68. padding: 60px 0 0 200px;
69. }
71. .main .tree {
72. width: 240px;
73. height: 40px;
74. }
76. ::v-deep .vue-treeselect__label {
77. color: #606266;
78. }
79. style>

测试数据： 

1. export default [
2. {
3. "title": "系统管理",
4. "parentId": 0,
5. "id": 1,
6. "children": [
7. {
8. "title": "菜单管理",
9. "parentId": 1,
10. "id": 11,
11. "children": [
12. {
13. "title": "菜单新增",
14. "parentId": 11,
15. "id": 111
16. },
17. {
18. "title": "菜单编辑",
19. "parentId": 11,
20. "id": 112
21. },
22. {
23. "title": "菜单删除",
24. "parentId": 11,
25. "id": 113
26. }
27. ]
28. },
29. {
30. "title": "角色管理",
31. "parentId": 1,
32. "id": 22,
33. "children": [
34. {
35. "title": "角色编辑",
36. "parentId": 22,
37. "id": 222
38. },
39. {
40. "title": "角色新增",
41. "parentId": 22,
42. "id": 221
43. },
44. {
45. "title": "角色删除",
46. "parentId": 22,
47. "id": 223
48. }
49. ]
50. }
51. ]
52. },
53. {
54. "title": "用户管理",
55. "parentId": 0,
56. "id": 33,
57. "children": [
58. {
59. "title": "用户新增",
60. "parentId": 33,
61. "id": 331
62. },
63. {
64. "title": "用户编辑",
65. "parentId": 33,
66. "id": 332
67. },
68. {
69. "title": "用户删除",
70. "parentId": 33,
71. "id": 333
72. }
73. ]
74. }
75. ]

效果如下：