vue目录树的封装

vue中目录的实现方法

封装一个只有一级的单选或多选树形组件

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

展开与收起只是需要一个默认的展示状态，并不需要双向数据绑定，所以这样写就行了

  watch: {
    isExpand: {
      immediate: true,
      handler: function (val) {
        this.isOpen = val;
      },
    },
  },
    methods: {
    changeExpand() {
      this.isOpen = !this.isOpen;
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13

使用：

      
      
        单选目录
      

      
        多选目录
      
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

封装一个多级目录树组件

方法1：自己封装一个目录组件，递归思想

treeItem.vue文件：

组件treeItem通过name属性，自己引用自己

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

tree.vue文件：

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

方法2：使用antd的a-tree或element-ui的tree组件

他的有个问题就是只能选中最后一级的数据，上一级是不能选的

    
    
data(){
    return {
      defaultProps: {
        children: "children",
        label: "title",
      },
    }
}
methods:{
    handleNodeClick(){}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

遇到的一些问题及解决方案：

怎么获取当前节点的父级

在treeData中找到id为4的所有父级

      function getParents(propName, id, data) {
        // 深度遍历查找
        function dfs(data, id, parents) {
          for (var i = 0; i < data.length; i++) {
            var item = data[i];
            // 找到id则返回父级id
            if (item[propName] === id) return parents;
            // children不存在或为空则不递归
            if (!item.children || !item.children.length) continue;
            // 往下查找时将当前id入栈
            parents.push({
              pid: item[propName],
              pIndex: i,
            });
            if (dfs(item.children, id, parents).length) return parents;
            // 深度遍历查找未找到时当前id 出栈
            parents.pop();
          }
          // 未找到时返回空数组
          return [];
        }
        return dfs(data, id, []);
      }
      getParents("id", 4, treeData);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

怎么快速操作dom

绑定唯一的id，通过id获取最快

$ref没有那么好找，而且它还要注意this和它在哪个组件中使用的问题，只有要修改里面的数据或调用方法才使用

控制展开怎么控制

1、通过递归遍历，给每一个数据加上一个控制展开的变量，这个是最简单的操作方法，优点是对于单一节点的展开或收起好操作（主要是指非点击节点的展开与收起，比如搜索节点的点击跳转）；缺点是如果收起或展开全部的话需要自己递归，虽然写起来也还简单

2、通过组件的变量去控制展开与收起，优点是对于全部的展开与收起好掌控，只需要通过父级传传递一个变量，监听这个变量就可以控制了；缺点是对于某个个节点的展开与收取，如果不是点击节点的话（比如搜索点击跳转点位），不方便找到节点

vue组件递归的时候，父级可能没有监听到事件

给递归的组添加

v-on="$listeners"
1

组件递归的使用需要记得传递对应的props