基于element+vue树形结构外加多选框
今天有空整理了之前项目中用到的树形结构外加多选框,并实现一定的逻辑，比如全选，单选，全选和单选之间的联动
之前也在网上搜到过有关此功能的实现,于是我也就参考着写了一个,放在了自己的博客里,就当是给自己做了一个笔记,
嘿嘿嘿~~~
下面我直接贴代码
下面是menu.vue的代码
然后是树形组件components文件夹中menuTree.vue的代码
最后就是模拟的数据
[
{
"menuId": 11000000000297,
"parentMenuId": null,
"menuName": "Call车",
"menuTitle": "Call车",
"childrenMenus": [
{
"menuId": 11000000000299,
"parentMenuId": 11000000000297,
"menuName": "需求管理",
"menuTitle": "需求管理",
"childrenMenus": [
{
"menuId": 11000000000300,
"parentMenuId": 11000000000299,
"menuName": "查看",
"menuTitle": "查看",
"childrenMenus": [],
"selected": true
},
{
"menuId": 11000000000301,
"parentMenuId": 11000000000299,
"menuName": "需求Call车",
"menuTitle": "需求Call车",
"childrenMenus": [],
"selected": true
}
],
"selected": true
},
{
"menuId": 11000000000304,
"parentMenuId": 11000000000297,
"menuName": "需求分配",
"menuTitle": "需求分配",
"childrenMenus": [],
"selected": true
}
],
"selected": true
},
{
"menuId": 11000000000312,
"parentMenuId": null,
"menuName": "财务相关",
"menuTitle": "财务相关",
"childrenMenus": [
{
"menuId": 11000000000313,
"parentMenuId": 11000000000312,
"menuName": "奖金",
"menuTitle": "奖金",
"childrenMenus": [
{
"menuId": 11000000000314,
"parentMenuId": 11000000000313,
"menuName": "奖金查询",
"menuTitle": "奖金查询",
"childrenMenus": [],
"selected": true
},
{
"menuId": 11000000000315,
"parentMenuId": 11000000000313,
"menuName": "奖金上传",
"menuTitle": "奖金上传",
"childrenMenus": [],
"selected": false
},
{
"menuId": 11000000000316,
"parentMenuId": 11000000000313,
"menuName": "奖金审核",
"menuTitle": "奖金审核",
"childrenMenus": [],
"selected": true
}
],
"selected": true
},
{
"menuId": 11000000000317,
"parentMenuId": 11000000000312,
"menuName": "资金",
"menuTitle": "资金",
"childrenMenus": [
{
"menuId": 11000000000318,
"parentMenuId": 11000000000317,
"menuName": "资金查询",
"menuTitle": "资金查询",
"childrenMenus": [],
"selected": true
},
{
"menuId": 11000000000319,
"parentMenuId": 11000000000317,
"menuName": "延期付款申请/提交",
"menuTitle": "延期付款申请/提交",
"childrenMenus": [],
"selected": true
},
{
"menuId": 11000000000321,
"parentMenuId": 11000000000317,
"menuName": "延期付款查询",
"menuTitle": "延期付款查询",
"childrenMenus": [],
"selected": true
},
{
"menuId": 11000000000322,
"parentMenuId": 11000000000317,
"menuName": "延期付款备案",
"menuTitle": "延期付款备案",
"childrenMenus": [],
"selected": true
}
],
"selected": true
},
{
"menuId": 11000000000323,
"parentMenuId": 11000000000312,
"menuName": "折扣",
"menuTitle": "折扣",
"childrenMenus": [
{
"menuId": 11000000000324,
"parentMenuId": 11000000000323,
"menuName": "折扣录入",
"menuTitle": "折扣录入",
"childrenMenus": [],
"selected": true
},
{
"menuId": 11000000000325,
"parentMenuId": 11000000000323,
"menuName": "折扣提交",
"menuTitle": "折扣提交",
"childrenMenus": [],
"selected": true
},
{
"menuId": 11000000000328,
"parentMenuId": 11000000000323,
"menuName": "折扣申请查询",
"menuTitle": "折扣申请查询",
"childrenMenus": [],
"selected": true
}
],
"selected": true
}
],
"selected": true
},
{
"menuId": 11000000000342,
"parentMenuId": null,
"menuName": "信息上传",
"menuTitle": "信息上传",
"childrenMenus": [
{
"menuId": 11000000000343,
"parentMenuId": 11000000000342,
"menuName": "PDI验收",
"menuTitle": "PDI验收",
"childrenMenus": [],
"selected": false
},
{
"menuId": 11000000000344,
"parentMenuId": 11000000000342,
"menuName": "终端销售提报",
"menuTitle": "终端销售提报",
"childrenMenus": [],
"selected": false
}
],
"selected": false
}
]
至此，一个树形组件外加多选框就做好了
下面看下效果图
第一次写博客,不足之处还望大家见谅,嘿嘿嘿~~~