使用elementUi的树形数据与懒加载的表格控件展示菜单信息

先放核心代码

<el-table :data="dataList"
                      style="width: 100%;margin-bottom: 20px;"
                      row-key="id"
                      border
                      lazy
                      :load="load"
                      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"          
            >
                   <el-table-column prop="name" label="菜单名称" align="center"></el-table-column>
                <el-table-column prop="linkUrl" label="访问路径" align="center"></el-table-column>
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

• script部分

 var vue = new Vue({                                                                              
     el: '#app',                                                                                  
     data() {                                                                                     
         return {                                                                                                                                                                 
           dataList: [],//当前页要展示的分页列表数据    
         }                                                                                        
       }                                                                                          
     },                                                                                           
     //钩子函数，VUE对象初始化完成后自动执行                                                                       
     created() {                                                                                  
         this.findPage();                                                                         
                                                                                                  
     },                                                                                           
                                                                                                  
     methods: {                                                                                   
                                                                                                  
                                                                             
         //分页查询                                                                                   
         findPage() {                                                                             
             // this.pagination.queryString = null;                                               
             var parm = null;                                                                     
             if (this.pagination.queryString == null) {                                           
                                                                                                  
                 parm = {                                                                         
                     currentPage: this.pagination.currentPage,                                    
                     pageSize:this.pagination.pageSize,                                           
                     queryString: null                                                            
                 }                                                                                
             } else {                                                                             
                 this.pagination.currentPage = 1;                                                 
                 parm = {                                                                         
                     currentPage: this.pagination.currentPage,                                    
                     pageSize: this.pagination.pageSize,                                          
                     queryString: this.pagination.queryString                                     
                 }                                                                                
             }                                                                                    
             axios.post("/menu/findMenuPage.do", parm).then((res)=>{                              
                 //this.menuList = res.data.data;                                                 
                 //为模型数据赋值，基VUE的双向绑定展示到页面                                                         
                 this.dataList = res.data.rows;                                                   
                 this.row= res.data.rows.id                                                       
                 this.pagination.total = res.data.total;                                          
                 this.pagination.queryString = null;                                              
             })                                                                                   
         },                                                                                       
         //tree包含点击的节点数据，里面包含key值为children，含有子节点的数据，通过resolve回显到前端                                
         load(tree, treeNode, resolve) {                                                          
             console.log(tree)                                                                    
             setTimeout(() => {                                                                   
                 resolve(tree.children)                                                           
             }, 1000)                                                                             
         },                                                                                                                                   
     }                                                                                            
 })                                                                                               

这里的tree是重点， 要懒加载需要获取点击的节点的子节点，后台传输数据的父节点（只有一级节点）children里包含子节点内容。
通过console.log(tree)可以发现它的结构

{…}
children: Array(3)
0: {…}
1: {…}
2: {…}
length: 3
__ob__: Observer {value: Array(3), dep: Dep, vmCount: 0}
__proto__: Array
description: (...)
hasChildren: (...)
icon: (...)
id: (...)
level: (...)
linkUrl: (...)
name: (...)
parentMenuId: (...)
path: (...)
priority: (...)
roles: (...)