<v-org-tree ref="orgTree" v-else style="background: #f7f9fa" :node-render="nodeRender" :data="data" collapsable :options="options" @on-node-click="NodeClick" :accordion="true" @on-expand="onExpand" :default-expand-level="2" > </v-org-tree>
时间: 2023-11-11 22:20:49 浏览: 143
在element-ui的el-tree组件中用render函数生成el-button的实例代码
在这段代码中,`<v-org-tree>`组件上使用了`:default-expand-level="2"`属性,表示默认展开到第2层级。同时,还使用了`@on-expand`事件监听器和`onExpand`方法,当节点被展开时,会触发该事件并调用`onExpand`方法。`<v-org-tree>`组件还使用了`:accordion="true"`属性,表示只展开一个节点的子节点。
另外,`<v-org-tree>`组件还使用了`:node-render="nodeRender"`属性,指定了节点渲染函数。`nodeRender`方法接收一个参数`{node, data, store}`,其中`node`表示当前节点的数据,`data`表示整个树的数据,`store`表示整个树的状态。该方法需要返回一个 VNode 对象,用于渲染当前节点的内容。在这个示例中,`nodeRender`方法返回了一个包含当前节点名称和职位的 VNode 对象。
最后,`<v-org-tree>`组件还使用了`@on-node-click="NodeClick"`事件监听器和`NodeClick`方法,当节点被点击时,会触发该事件并调用`NodeClick`方法。在这个示例中,`NodeClick`方法只是简单地打印了当前节点的名称和职位信息。
阅读全文