需求

要初始化树形数据，点击展开时请求后端数据返回，组装成新树再渲染展示。

来吧展示

<el-form-item label="实体类型" prop="entityType"><el-popover placement="bottom" width="200" trigger="click"v-model="popoverVisible"><el-tree style="background: transparent;color: #fff;":data="entityTypes" :props="defaultProps"lazy  //load懒加载时:load="loadNode"才生效:load="loadNode":expand-on-click-node="false"@node-click="selectEntityTypeHandler"></el-tree><el-input slot="reference" readonly size="small" style="width: 82%;cursor: pointer" placeholder="请选择实体类型" v-model="form.selectedEntityType"></el-input></el-popover>
</el-form-item>

此处省略选择组件时请求后端数据的代码

defaultProps设置如下，isLeaf为是否为最后一层节点，是否还可展开，在请求返回数据后组装数据，在为最后一层数据是isLeaf为true,则不会展示左侧展开箭头。下面load方法中有组装示例以及效果展示

defaultProps: {children: 'children',label: 'label',isLeaf: "isLeaf"},

我这边在监听到事件后使用async关键字去请求后端数据，在展开节点时也使用async请求后端数据、返回后渲染

  //懒加载async loadNode(node, resolve){var self = this;if (node.level === 0) {//本地的数据，一个承载中国字样的数组；return resolve(self.form.entityTypes);} else{if (node.data.catalog) {//目录;let rs = await apiGetEntityDirType(node.data.entityDirInfo.directoryid, node.data.entityDirInfo.businessdbid);if (rs && rs.data && rs.data.success) {rs.data.data.forEach((obj)=>{if (obj.catalog){obj.label=obj.entityDirInfo.directoryName;}else {obj.label=obj.datasetInfoVO.datasetAlias;obj.isLeaf=true;}});return resolve(rs.data.data)};}}},

最终效果如图