动手撸一个基于Vue的类树形全选与反选组件

发表于 阅读次数：

没有找到适合项目的组件，只有自己动手写一下了。

最近，由于公司后台管理系统重构，需要一个用到如图所示的一个功能：

项目使用的Vue和elementUI

treebox.gif

一共有4级菜单，要实现全选和反选功能，当下级有一个被选中时，上级也要被选中；当下级全部未被选中时，上级也不能被选中。

网上搜了一圈也没有找到合适的，elementUI的tree组件虽然功能能实现，但是改样式又不方便，于是，只好自己撸一个了。。。。不写不知道自己有多菜！这个东西居然耗时一天。。

这个功能被抽离出来，做成了一个单独的组件。

下面记录下主要的代码：
后台返回的菜单数据格式

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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
let menuData = [
    {
        "id": 1,
        "menName": "管理模式",
        "path": "manageMode",
        "businessCode": "manageMode",
        "parentId": 0,
        "isChecked": null,
        "menLevel": 1,
        "subMenuPermissionsVO": [
            {
                "id": 105,
                "menName": "首页",
                "path": "/index",
                "businessCode": "index",
                "parentId": 1,
                "isChecked": null,
                "menLevel": 2,
                "subMenuPermissionsVO": []
            },
            {
                "id": 106,
                "menName": "工作报表",
                "path": "/report",
                "businessCode": "report",
                "parentId": 1,
                "isChecked": null,
                "menLevel": 2,
                "subMenuPermissionsVO": [
                    {
                        "id": 107,
                        "menName": "数据总揽",
                        "path": "/reportOverView",
                        "businessCode": "reportOverView",
                        "parentId": 106,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": []
                    },
                    {
                        "id": 109,
                        "menName": "客服",
                        "path": "/reportService",
                        "businessCode": "客服",
                        "parentId": 106,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": [
                            {
                                "id": 110,
                                "menName": "工作报表",
                                "path": "/report-service-workreport",
                                "businessCode": "工作报表",
                                "parentId": 109,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            },
                            {
                                "id": 111,
                                "menName": "工作质量报表",
                                "path": "/report-service-qualityreport",
                                "businessCode": "工作质量报表",
                                "parentId": 109,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            }
                        ]
                    },
                    {
                        "id": 112,
                        "menName": "留言报表",
                        "path": "/reportLeaveWords",
                        "businessCode": "留言报表",
                        "parentId": 106,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": []
                    },
                    {
                        "id": 113,
                        "menName": "访问轨迹",
                        "path": "/reportWebsite",
                        "businessCode": "访问轨迹",
                        "parentId": 106,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": []
                    }
                ]
            },
            {
                "id": 114,
                "menName": "历史会话",
                "path": "/history",
                "businessCode": "历史会话",
                "parentId": 1,
                "isChecked": null,
                "menLevel": 2,
                "subMenuPermissionsVO": []
            },
            {
                "id": 115,
                "menName": "客服管理",
                "path": "/service",
                "businessCode": "客服管理",
                "parentId": 1,
                "isChecked": null,
                "menLevel": 2,
                "subMenuPermissionsVO": [
                    {
                        "id": 116,
                        "menName": "所有客服",
                        "path": "/service-all",
                        "businessCode": "所有客服",
                        "parentId": 115,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": []
                    },
                    {
                        "id": 117,
                        "menName": "角色设置",
                        "path": "/service-role-setting",
                        "businessCode": "角色设置",
                        "parentId": 115,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": []
                    }
                ]
            },
            {
                "id": 118,
                "menName": "企业账户",
                "path": "/business",
                "businessCode": "企业账户",
                "parentId": 1,
                "isChecked": null,
                "menLevel": 2,
                "subMenuPermissionsVO": [
                    {
                        "id": 119,
                        "menName": "团队信息",
                        "path": "/business-team",
                        "businessCode": "团队信息",
                        "parentId": 118,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": []
                    },
                    {
                        "id": 120,
                        "menName": "当前服务详情",
                        "path": "/business-service",
                        "businessCode": "当前服务详情",
                        "parentId": 118,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": []
                    },
                    {
                        "id": 121,
                        "menName": "团队联系人",
                        "path": "/business-contacts",
                        "businessCode": "团队联系人",
                        "parentId": 118,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": []
                    }
                ]
            },
            {
                "id": 122,
                "menName": "设置",
                "path": "/setting",
                "businessCode": "设置",
                "parentId": 1,
                "isChecked": null,
                "menLevel": 2,
                "subMenuPermissionsVO": [
                    {
                        "id": 123,
                        "menName": "系统设置",
                        "path": "/setting-system",
                        "businessCode": "系统设置",
                        "parentId": 122,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": [
                            {
                                "id": 124,
                                "menName": "个人信息",
                                "path": "/setting-userinfo",
                                "businessCode": "个人信息",
                                "parentId": 123,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            },
                            {
                                "id": 125,
                                "menName": "修改密码",
                                "path": "/setting-change-pwd",
                                "businessCode": "修改密码",
                                "parentId": 123,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            },
                            {
                                "id": 126,
                                "menName": "通知中心",
                                "path": "/setting-notice",
                                "businessCode": "通知中心",
                                "parentId": 123,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            }
                        ]
                    },
                    {
                        "id": 127,
                        "menName": "在线服务",
                        "path": "/setting-online",
                        "businessCode": "在线服务",
                        "parentId": 122,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": [
                            {
                                "id": 128,
                                "menName": "基础设置",
                                "path": "/setting-online-base",
                                "businessCode": "基础设置",
                                "parentId": 127,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            }
                        ]
                    },
                    {
                        "id": 129,
                        "menName": "接入设置",
                        "path": "/setting-join",
                        "businessCode": "接入设置",
                        "parentId": 122,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": [
                            {
                                "id": 130,
                                "menName": "网站接入",
                                "path": "/setting-join-website",
                                "businessCode": "网站接入",
                                "parentId": 129,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            }
                        ]
                    },
                    {
                        "id": 131,
                        "menName": "高级设置",
                        "path": "/setting-advanced",
                        "businessCode": "高级设置",
                        "parentId": 122,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": [
                            {
                                "id": 132,
                                "menName": "短信服务",
                                "path": "/setting-advanced-msg",
                                "businessCode": "短信服务",
                                "parentId": 131,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            },
                            {
                                "id": 133,
                                "menName": "二维码名片",
                                "path": "/setting-advanced-qrcode",
                                "businessCode": "二维码名片",
                                "parentId": 131,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        "id": 2,
        "menName": "客服模式",
        "path": "customerMode",
        "businessCode": "customer",
        "parentId": 0,
        "isChecked": null,
        "menLevel": 1,
        "subMenuPermissionsVO": [
            {
                "id": 102,
                "menName": "留言",
                "path": "儿",
                "businessCode": "分隔符",
                "parentId": 2,
                "isChecked": null,
                "menLevel": 2,
                "subMenuPermissionsVO": [
                    {
                        "id": 103,
                        "menName": "小计成",
                        "path": "34",
                        "businessCode": "大幅度",
                        "parentId": 102,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": [
                            {
                                "id": 104,
                                "menName": "76657",
                                "path": "76868",
                                "businessCode": "658568",
                                "parentId": 103,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

父组件主要代码：

1
2
3
4
5

<tree-table :menuData="menuData" :level="1"></tree-table>

// 其中menuData为后台返回的数据，level为菜单层级，在menuData中有返回，这里主要是用来写样式用的。。

子组件组件代码（一个递归组件）：

子组件全部代码（说明都在代中有注释）：

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
<template>
  <ul class="tree-container" :class="'level'+level">
    <li class="" v-for="(item, Index) in menuData" :key="item.id" :class="'level'+item.menLevel">
      <div class="tree-node-title" :class="'level'+item.menLevel"><label>
        <input type="checkbox" @click.stop="nodeClick(item,Index)" name="menuSelected" :checked="item.isChecked ** 1 ? true : false" :value="item.id">
        {{item.menName}}-level{{item.menLevel}}
      </label></div>
      <div class="tree-childnode-container " :class="'level'+item.menLevel">
        <CheckBox :menuData="item.subMenuPermissionsVO" :level="item.menLevel"></CheckBox>
      </div>
    </li>
  </ul>

</template>

<script>
  export default {
    name: 'CheckBox',
    props: ["menuData", "level"],
    data() {
      return {
        checkedVal:[]
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      nodeClick(node, index) {
      // 通过isChecked判断是否为选中状态：1-选中；0-未选中。这个字段是后端接口返回的
        if (node.isChecked ** 1) {
          this.$set(node, "isChecked", 0)
        } else {
          this.$set(node, "isChecked", 1)
        }
        // 个人理解：组件每次递归调用会生成一个实例，this指向这个实例，这些实例相互独立的，所以每次的this都不一样，具体可以控制台打印看下。
        this.refreshAllParentNodes(this) // 设置父级状态
        this.refreshAllSonNodes(this.$children[index], node.isChecked);// 根据当前点击层级的状态设置自己所有子级的状态
      },
      refreshAllSonNodes(node, status) {

        if (node && node.$children.length) {
          node.menuData.map((meunItem, j) => {
            this.$set(meunItem, 'isChecked', status);
            this.refreshAllSonNodes(node.$children[j], status);
          })
        }
      },
      refreshAllParentNodes(node) {
        if (node) {
          var status = 0;
          var nullCount = 0;
          var fullCount = 0;

          if (node.menuData && node.$parent.menuData) {
            node.menuData.map((meunItem, j) => {
              if (typeof meunItem.isChecked ** 'undefined') {
                nullCount++
              } else if (meunItem.isChecked ** 0) {
                nullCount++
              } else if (meunItem.isChecked ** 1) {
                fullCount++
              }
            })
            if (nullCount === node.$children.length) {
            // 该状态说明当前点击层级和兄弟层级都没选中，所以父级也是未选中状态
              status = 0;
            } else {
            //该状态说明当前点击层级和兄弟层级只要有一个选中，父级也是选中状态
              status = 1;
            }
            node.$parent.menuData.map(child => {
              node.menuData.map((meunItem, j) => {
                if (child.id ** meunItem.parentId) {
                // 根据父级id和子级的parentId是否相等，来确定当前点击的层级的父级是哪一个
                  this.$set(child, 'isChecked', status);
                }
              })

            })
          }
          // 递归计算父级
          this.refreshAllParentNodes(node.$parent);
        }
      },
    }
  }
</script>

<style lang="scss">
  .tree-container {
    $borderColor: #ebeef5;
    width: 100%;
    padding: 0;

    &.level3 {
      display: flex;
      flex-wrap: wrap;

      & > .level4 {
        width: 25%;
        padding: 0 20px 0 40px;
      }
    }

    & > .level2 {
      display: flex;
      align-items: center;
      border: 1px solid $borderColor;
      line-height: 45px;

      .tree-node-title {
        &.level2 {
          width: 160px;
          text-align: center;
        }

      }
    }

    .level3 {
      .level3 + .level3 {
        border-top: 1px solid $borderColor;
      }
    }

    .tree-node-title {
      &.level3 {
        background-color: #f2f2f2;
        width: 100%;
        padding: 0 20px;
      }

      &.level1 {
        padding: 20px 0;
      }

    }

    .level2 + .level2 {
      border-top: none;
    }

    .tree-childnode-container {
      width: 100%;

      &.level2 {
        border-left: 1px solid $borderColor;
      }
    }

    input {
      margin-right: 5px;
    }

    label {
      cursor: pointer;
    }

  }
</style>

注意
在当前组件中使用组件本身（递归），注意图中圈出的地方，上面有两种写法

0700DC7EBB9A450C8504982D46B291E3.png