1. 使用 el-table 实现树形数据懒加载

实现必需条件： lazy :load=“loadNode    
    
    
    
” :tree-props=“{ children: ‘children’, hasChildren: ‘hasChildren’ }   


     


     


     


   ”

注意：特别是第3条  
    
    
    
   ，后端接口必须传给你"hasChildren"(名字可以不一样)

     


     


     


     

，值为 true或false 




 




 




 




，如果是根节点值为true  

   

   

   

  ，子节点值为false

     

     

     

     
，不然数据旁边的小三角不会显示  




  




  




  




，即不能获取子节点数据

实现代码如下： <el-table lazy :load="loadNode" :tree-props="{ children: children, hasChildren: hasChildren }" // 点击小三角执行的方法 const loadNode = (row: { [key: string]: any }, treeNode: any, resolve: any) => { if (row.level >= 1) { state.tableData.param.level = row.level + 1; //后端要求传参变化 state.tableData.param.code = row.code; Query(state.tableData.param).then((response: Array<{ [key: string]: any }>) => { resolve(response); }); } }; >

2. 点击行展开

要求点击当前行也可以展开数据（之前是点击小三角才能展开） 代码如下： // 使用点击事件 @row-click="getOpenDetail" // 点击当前行展开节点 const getOpenDetail = (row: any, column: any, e: any) => { if (e.currentTarget.firstElementChild.firstElementChild.firstElementChild.tagName == DIV) { e.currentTarget.firstElementChild.firstElementChild.firstElementChild.click(); } else { e.currentTarget.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.click(); } };

3. 每次只展示一条数据

要求点击根节点时  


  


  


  


 ，其余根结点不展开
     
     
     
     ，只展开当前根节点及其对应的子节点 代码如下： // 需要用到以下代码
   




   




   




   




，其中 code 为数据唯一标识 



 



 



 



，与 id 作用一样 row-key="code" :expand-row-keys="expands" @expand-change="expandSelect" // 每次只展开一行 const expandSelect = (row: { [key: string]: any }, expanded: boolean) => { if (expanded) { expands.value = []; if (row) { expands.value.push(row.code, row.code.substring(0, 2), row.code.substring(0, 4), row.code.substring(0, 6)); // 每次push进去的是每行的code和父元素的code } } else { expands.value = []; // 默认不展开

} }; 后台数据如下：

根节点数据为code前两位数                     ，以后的子节点数据依次加两位数

4. 自定义表格合计值

要求在表格的最后一行显示数据的合计值

    




    




    




    



，因为是懒加载的数据



















，不能自动累加显示出合计值                     ，前端需要自己赋值 代码如下： show-summary :summary-method="getSummaries" // 自定义表尾合计行 const getSummaries = (param: any) => { const { columns, data } = param; const sums: string[] = []; columns.forEach((column: any, index: number) => { switch (index) { case 0: sums[index] = 合 计; break; case 2: sums[index] = state.array.allDutyCost;// state.array.allDutyCos 为后端返回已经计算好的总数值 break; case 3: sums[index] = state.array.allBudgetCost; break; case 4: sums[index] = state.array.allAdjustCost; break; default: sums[index] = ——; } });

文中有错误或不懂的地方

     



     



     



     


，可以留言一起讨论！