Vue:使用ElementUI, Cascader 级联选择器

网友投稿 1103 2022-05-30

需求:

多级分类

支持多选

选择子节点需要把父节点的值也选中,用于筛选时选中父节点也能筛出子节点

分类可以无限级添加子节点

开发

这个需求使用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

Vue:使用ElementUI, Cascader 级联选择器

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小时内删除侵权内容。

上一篇:抽奖小游戏——纯前端实现(纯小白也能看懂&CV直接拿走直接玩&&源码分享)
下一篇:自动化测试平台(一):前期准备和后端服务搭建
相关文章