一、使用背景
在项目中，通常面临这样的需求：一级菜单点击后会出现二级菜单，并且点击一级菜单发送的请求返回的数据是二级菜单内容。面对这样的需求，运用elementUI库，首先想到的组件是Tree属树形控件中的懒加载自定义子节点。实现的需求如下图：
如果返回的数据已经是层级数据，不需要每点击一次渲染下一级子菜单，则只需要使用基础用法稍加修改即可。附上官网文档链接：Element - The world's most popular Vue UI framework
二、组件解读
这是官网的例子，接下来会一步一步分析代码含义
:props="props" :load="loadNode" lazy show-checkbox> :props：可指定组件中属性： label：节点名称 children：指定子节点对象 isLeaf：指定节点是否为子节点（lazy属性下生效） :load：加载子节点方法函数，函数有两个参数：node、resolve node： 打印node可以发现：其实是一个对象，里面有很多属性。这里着重说一下两个属性： childNodes：这里是当前节点数据，有5个代表这一层目录有条目录渲染 level：代表当前层级 resolve：是一个回调函数resolve（data），里面需要传入参数data，作为下一级菜单数据 lazy：代表使用懒加载子节点（需要与load方法结合使用） node-click事件：节点被点击时候的回调 第一个参数：是一个对象，对象里面是当前点击的节点数据 第二个参数：该节点 第三个参数：当前组件本身 三、实例分析 这是官网组件给的小案例，简单写一下代码意思： 实际使用： // 获取数据接口方法封装 async getGoodsItemCategory( params) { const res = await api.goodsItemCategory({ type: params }) console.log(res) if (res.data.status === 200) { return res.data.result } else { return [] } }, 这里主要注意：如果是第一层（node.level === 0）带入默认参数发送请求回去数据。如果是第二层及以上，则需要携带参数发送请求（根据传参数不同，这里是获取点击的数据中的cid作为参数发送请求） 四、额外补充 1.render-content属性---树节点内容的自定义 render-content属性可对每个节点内容区域进行自定义编辑，其值是一个渲染函数Function(h, { node, data, store } 第一个参数h，打印后我们看到是为一个回调函数 第二个参数是一个对象，里面包含节点信息，节点数据以及存储树 node： data： store： 在自定义节点内容时，多会用到参数data，展示的是每个节点的数据 html代码 :data="this.treeData" show-checkbox default-expand-all node-key="id" :render-content="renderContent" :expand-on-click-node="false" > js代码 // 树节点渲染方法 renderContent(h, { node, data, store }) { return ( {data.name} {data.type === 1 ? ( ) : ( )} ) }, 节点内容自定义，也可以通过scoped slot实现 精彩内容
发表评论