elementui树形复选框,element-ui checkbox 组件的树形联动

前言

示例版本为 Element-ui 2.13.0 + Vue 2.6.11

最近想弄 Element-ui checkbox 的多级联动，网上相关的例子大多数为二级联动，自己研究了一下，弄了一个树形菜单的多级联动，常用于角色管理等业务。(仅供参考，未考虑性能问题)

数据模型

[

{

"menu": {

"id":14,

"menuName":"测试管理',

"parentId":0

} ，

"menuOptionsList":[

{

"id":46,

"optionsName":"列表",

"checked":false

},

{

"id":47,

"optionsName":"新增",

"checked":false

}

],

"children":[],

"checked":false

}

]复制代码

这里展示的最顶级的数据结构，下级数据只需要在 children 中添加即可。需要注意的是 checked 属性，本身数据库表中没有这个数据，需要后台建立一个 VO 映射实体将 checked 字段添加进去，默认值为 false.

逻辑处理