elementUI 如何动态的给 el-tree 添加子节点数据 children

elementUI 如何动态的给 el-tree 添加子节点数据 children

一、需求

有这样一个数据结构的 tree。

​​element​​ 的 tree 懒加载是从根上就开始懒加载，但我需要实现的是已经存在一个层级的 tree 结构，只是在末端点击的时候，载入末端以下的列表。

二、实现

1. tree 的实例事件 ​​node-click​​

我们就不能用它的懒加载方法了，而是使用 ​​node-click​​ 这个事件

<el-tree
    ref="treeNav"
    :indent="10"
    :default-expanded-keys="defaultExpandedKeys"
    @node-click="treeNodeClicked"
    :data="treeData"
    :highlight-current="true"
    node-key="id">
</el-tree>

当点击的事件说明：

点击的时候你获取到了：当前被点击节点的完整数据，你只需要

1. 用其中的​​id​​ 或者其它自己定义的标识字段，去获取对应的数据
2. 然后再格式化成​​tree​​ 的数据
3. 重新赋值给当前节点的​​children​​ 字段即可

2. tree 的实例方法：​​updateKeyChildren​​

此时你还需要用到 tree 的另一个方法： ​​updateKeyChildren​​。

其作用的就是根据你提供的节点的 ​​id​​​，设置这个节点的 ​​children​​ 数据，刚好是要用到的。

3. 自动展示当前被点击的节点

点击并插入当前节点的 ​​children​​ 数据之后，需要它自动展开

只需要设置 ​​tree​​​ 参数中的 ​​default-expanded-keys​​​ 为当前节点的 ​​key​​ 即可

this.defaultExpandedKeys = [nodeData.id]

4. 页面重新加载后，定位到当前的位置

页面的 url 参数中保留几个参数： ​​projectid​​​ ​​devicename​​​ ​​index​​

1. 页面重载之后，用 projectid 来获取内部数据
2. 添加到已有的树结构中
3. 再使用 tree 组件的 setCurrentNode(nodeKey) 方法来选中该选中的节点

当然，这个实现过程还是有点繁琐的。

页面重新刷新，其结果就是：

// 存在 projectId 时，加载对应项目的 preview 信息，并定位到之前的设备位置
        if (this.currentProjectId){
            this.getProjectPreviewOf(this.currentProjectId, projectPreview => {
                let checkedKey = `project-${this.currentProjectId}:${this.deviceName}`
                this.$refs.treeNav.setCurrentKey(checkedKey)
                this.SET_CURRENT_DEVICE_LIST(projectPreview[this.deviceName])
            })
        }

5. 参考代码

// 根据 projectId 获取对应项目的 preview
getProjectPreviewOf(nodeData){
    areaApi
        .previewOfProject({
            pid: nodeData.projectInfo.id
        })
        .then(res => {
            let treeDataForPreview = this.getTreeDataFromPreview(res, nodeData.projectInfo.id)
            console.log('Tree data for preview: ',treeDataForPreview)
            this.$refs.treeNav.updateKeyChildren(nodeData.id, treeDataForPreview)
            // 展开当前节点
            this.defaultExpandedKeys = [nodeData.id]
            // 默认展示：当前项目的第一个设备类型的设备
            this.SET_CURRENT_DEVICE_LIST(treeDataForPreview[0].deviceInfos)
        })
},

三、结果