Vue：使用ElementUI, Cascader 級聯選擇器

需求：

多級分類

支持多選

選擇子節點需要把父節點的值也選中，用于篩選時選中父節點也能篩出子節點

分類可以無限級添加子節點

開發

這個需求使用ElementUi, Cascader 級聯選擇器

文檔： https://element.eleme.cn/#/zh-CN/component/cascader

參數設置

// 篩選項 options:[ { value: "1", label: "one", children: [ { value: "1-1", label: "one-one" } ] }] // 屬性配置 props: { checkStrictly: true, // 父子關聯 expandTrigger: 'hover', multiple: true, // 多選 emitPath: true // true 返回二維數組，false 返回一維數組 }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

前后端交互問題

1、選擇了子節點誰補全父節點？

（1）前端補全，那么Cascader需要返回二維數組，包含完整路徑，后端返回也需要這個完整路徑

不過，此時后端接收的值是一個一維數組，返回數據結構溝通后和options一樣的層級結構

（2）后端補全，如果Cascader返回一個一維數組，只包含葉子節點，

（2.1 如果后端在存儲時自己添加父節點，數據回顯的時候會出現父節點的值，數據變得不可控

（2.2 如果后端在篩選查詢數據時自己通過子節點獲取父節點，查詢邏輯會變得復雜。

按照經驗來說，數據的查詢次數遠遠大于寫次數

為了查詢邏輯簡單，只能在編輯時處理。

綜上，需要采用前端補全父節點的方式，需要Cascader返回一個完整路徑的二維數組

2、數據回顯問題

最簡單的方式是后端增加一個冗余參數，按照Cascader返回的數據格式存儲

后端返回一個options一樣的層級結構

為了減少和后端的溝通，采用了后端返回一個options一樣的層級結構

這樣就需要遞歸的處理這個樹形層級結構，代碼如下

// 篩選項 let options = [ { value: "1", label: "one", children: [ { value: "1-1", label: "one-one", children: [ { value: "1-1-1", label: "one-one-one" }, { value: "1-1-2", label: "one-one-two" }, ] }, { value: "1-1-2", label: "one-one-two", children: [ { value: "1-1-2-1", label: "one-one-two-one" }, { value: "1-1-2-2", label: "one-one-two-two" } ] } ] } ]; // 實現深拷貝 function deepCopy(obj) { return JSON.parse(JSON.stringify(obj)); } // 節點遞歸添加到數組 function treeToArray(gloablList, option, parentList) { // 先將該節點的值和父節點的拷貝合并 let copyList = deepCopy(parentList); copyList.push(option.value); // 如果該節點有子節點，遞歸處理； // 如果沒有子節點，說明該節點是葉子節點，加入到全局list if (option.children) { for (let child of option.children) { treeToArray(gloablList, child, copyList); } } else { gloablList.push(copyList); } } // 處理列表 function treeTo2dArray(options) { // 定義一個全局列表，用于存放最后的值 let gloablList = []; // 處理每一個節點 for (let option of options) { treeToArray(gloablList, option, []); } return gloablList; } let ret = treeTo2dArray(options); console.log(ret); /** [ [ '1', '1-1', '1-1-1' ], [ '1', '1-1', '1-1-2' ], [ '1', '1-1-2', '1-1-2-1' ], [ '1', '1-1-2', '1-1-2-2' ] ] */

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

Vue 數據結構

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。