element 关系树的懒加载以及不同层级图标的渲染。

最新推荐文章于 2025-03-18 15:52:55 发布

原创最新推荐文章于 2025-03-18 15:52:55 发布 · 655 阅读

0 ·

CC 4.0 BY-SA版权

学习笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何使用Element UI实现关系树的懒加载功能，通过按需获取下级数据来提高性能。同时，文章探讨了在不同层级中设置不同图标以区分节点层次的方法，为构建高效且视觉友好的树形结构提供了实践指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面：

 <el-row  v-loading="treeLoading">
                      
                            <div>
                                <el-tree class="filter-tree"      //具体属性及方法含义参考官网
                                         :data="treeNodeData"
                                         :props="defaultProps"
                                         :render-content="renderContent"
                                         :default-expanded-keys="[0]"
                                         :load="loadChildrenNode"
                                         :highlight-current="true"
                                         lazy
                                         node-key="pdbh"
                                         @node-click="clickTreeNode"
                                         ref="tree">
                                </el-tree>
                            </div>
 </el-row>

data：

data(){
  return{
  treeLoading:false,
   treeNodeData:[],
  defaultProps: {
                    label: 'jdmc',
                    children: 'children',
                    isLeaf: 'leaf'  //控制是否有下箭头
                },
          }
}

方法：

methods:{
//根据不同的type ，渲染相应的图标
  renderContent(h, { node, data, store }) {
                let type = data.zylx;
                let iconClass = '';
                switch (type) {
                    case  '-1':
                        iconClass = 'el-icon-folder-opened';
                        break;
                    case '0': 
                        iconClass = 'def-icon bdz-icon';
                        break;
                    case '1': 
                        iconClass = 'def-icon kg-icon';
                        break;
                    case '2': 
                        iconClass = 'def-icon xl-icon';
                        break;
                    case '3': 
                        iconClass = 'def-icon tjd-icon';
                        break;
                    case '4': 
                        iconClass = 'def-icon kbs-icon';
                        break;
                    case '5': 
                        iconClass = 'def-icon kgg-icon';
                        break;
                    case '6': 
                        iconClass = 'def-icon gan-icon';
                        break;
                    case '7': 
                        iconClass = 'def-icon ta-icon';
                        break;
                    case '8': 
                        iconClass = 'def-icon gk-icon';
                        break;
                    case '9': 
                        iconClass = 'def-icon kh-icon';
                        break;
                   case '11': 
                        iconClass = 'def-icon zb-icon';
                        break;
                    case '10': 
                        iconClass = 'def-icon zb-icon';
                        break;
                    case 'yh': 
                        iconClass = 'el-icon-user-solid';
                        break;
                    default:
                        iconClass = 'el-icon-data-line';
                        break;
                }
                return (<span class="treeNode">
                    <i class={iconClass}></i>
                    <span class="el-tree-node__label">{node.data.jdmc}</span>
                    </span>);
            },
}

//懒加载获取下级数据，然后渲染。


 loadChildrenNode(node, resolve) {
                const pdbh = node.data.pdbh;
                  。。。。//发送相应请求
                 resolve(res.content)  
                 
                })
            },

//节点点击时进行相应的操作