效果如图:
大概思路:树形视图使用的是vue官方事例代码,java负责封装数据,按照vue官方事例的数据结构封装数据即可。有两个需要关注的点:
1。官方事例的数据结构是一个对象里面包含着集合,而不是一个集合对象2。递归算法
上代码:
前端:html + javascript
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt;脚本src=" https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js”祝辞& lt;/script>
& lt; !——引入样式——比;
& lt;链接rel="样式表" href=" https://unpkg.com/element-ui/lib/theme-chalk/index.css " rel=巴獠縩ofollow”比;
& lt; !——引入组件库——比;
& lt;脚本src=" https://unpkg.com/element-ui/lib/index.js "祝辞& lt;/script>
& lt;脚本src=" https://unpkg.com/axios/dist/axios.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/$ {ctx}/核心插件/电子战//jquery/jquery.min.js”取决于type=" text/javascript祝辞& lt;/script>
& lt; style>
身体{
字体类型:门罗,Consolas等宽字体;
颜色:# 444;
}
.item {
光标:指针;
}
.bold {
粗细:大胆的;
}
ul {
padding-left: 1 em;
行高:1.5 em;
list-style-type:点;
}
& lt;/style>
& lt;脚本type=" text/x-template " id=跋钅磕０濉北?
& lt; li>
& lt; div: class="{大胆:isFolder}”@click=扒谢弧盄dblclick=癿akeFolder”比;
{{item.name}}
& lt;跨度v=" isFolder "祝辞({{isOpen & # 63;' - ':' + '}}]& lt;/span>
& lt;/div>
& lt; ul v-show=v=癷sFolder”比“isOpen”;
& lt;树项目
类="项目"
v代表=" item.children(孩子,指数)”
:关键="指数”
:条目="孩子"
@make-folder=" $排放(make-folder,事件美元)”
@add-item=" $排放(添加物品,事件美元)”
祝辞& lt;/tree-item>
& lt;李类=疤砑印盄click=" $排放(添加物品,物品)”祝辞+ & lt;/li>
& lt;/ul>
& lt;/li>
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=把菔尽北?
& lt; ul比;
& lt;树项目类=跋睢?项=皌reeData @make-folder”=癿akeFolder”@add-item=癮ddItem”比;& lt;/tree-item>
& lt;/ul>
& lt;/div>
& lt;/body>
& lt;/html>
& lt; script>
Vue.component(树项目,{
模板:“#项目模板”,
道具:{
项目:对象
}，
数据:函数(){
返回{
isOpen:假
}
}，
计算:{
isFolder:函数(){
this.item返回。孩子,,
this.item.children.length
}
}，
方法:{
切换:函数(){
如果(this.isFolder) {
这一点。isOpen=! this.isOpen
}；
}，
makeFolder:函数(){
如果(! this.isFolder) {
这一点。发出(make-folder, this.item)美元
这一点。isOpen=true
}
}
}
}）
Vue ({var=new演示
艾尔:#演示,
数据:{
treeData: {}
}，
方法:{
makeFolder:函数(项){
Vue。集(项目,“孩子”,[])
this.addItem(项)
}，
addItem:函数(项){
item.children.push ({
名称:“新的东西”
}）
}，
searchData:函数(){
调试器;
axios.get (menuRoleLimitBLH_searchMenus.do& # 63; pageType=1)
不要犹豫(反应=比;（
这一点。treeData=https://www.yisu.com/zixun/response.data.json.menuMaps
）)
.catch(错误=> console.log(错误));
}
}，
创建(){
this.searchData ();
}，
}）
后台:java + mysql,一共三个方法,分别是:1。获取请求2获取所有菜单3递归菜单的父子关系
/* *
*目的:菜单列表页面
* @author JaxWan
* @param点播
* @return IZrarResponse
*/公共IZrarResponse searchMenus (IZrarRequest点播){
IZrarResponse res=new ZrarResponse ();
字符串pageType=req.getParameter (“pageType”);
如果(StringUtil.isNotNull (pageType)) {
ListEwTreeVOs=dao.selectList (“selectAllMenuTree”);
List比;菜单=this.getMenusList (EwTreeVOs);
Object> Map<字符串;地图=new HashMap<字符串,Object> ();
地图。put (" id ", 1);
地图。(“名字”,2);
地图。把(“孩子”,菜单);
res.addJson (“menuMaps”,地图);
其他}{
res.addPage(“页面/ewsys/部门/menu_role_limit.jsp”)。addJSTL (“isExtForm”,假)。addJSTL (“isEmptyForm”,假);
}
返回res;
}/* *
*目的:获取菜单集合
* @author JaxWan
* @param EwTreeVOs
* @return List
