Element UI el-tree 实现选中指定节点

使用 Element UI el-tree 组件选中指定节点

本文将介绍如何在 Element UI 的 el-tree 组件中，根据 API 返回的特定数据选中指定的节点。

问题描述：

假设你有一个 API getMenuString，它返回包含一组 ID 的字符串，例如：

{
  "code": 200,
  "data": '1678656829503172608,1680751128491327488',
  "msg": "操作成功"
}

你需要根据这个返回值，在 el-tree 组件中选中对应 ID 的节点。

解决方案：

为了实现这个功能，你需要在 el-tree 的数据源（treeData）中，判断每个节点的 ID 是否包含在 API 返回的 ID 列表中。如果是，则设置该节点的 checked 属性为 true，否则设置为 false。

代码示例：

function handleQueryResTree() { 
    loading.value = true;
    getResPageT(queryParams2)
        .then((data: any) => {
            treeData.splice(0); // 清空数组
            treeData.push(...data.data);
            
            // 循环treeData数组，判断每个节点是否选中
            treeData.forEach((node) => {
                if (data.data.indexOf(node.resId) !== -1) {
                    node.checked = true;
                } else {
                    node.checked = false;
                }
            });
        })
        .finally(() => {
            loading.value = false;
        });
}

解释：

1. 获取数据： 使用 getResPageT 函数获取 treeData 数据。
2. 清空数据： 使用 splice(0) 清空 treeData 数组，确保每次获取新数据时，都从干净的状态开始。
3. 更新数据： 使用 push(...data.data) 将新获取的数据添加到 treeData 中。
4. 判断节点选中状态： 循环遍历 treeData，使用 indexOf 方法判断当前节点的 resId 是否存在于 API 返回的 data 中。如果存在，则设置 node.checked = true，否则设置 node.checked = false。

最终效果：

通过上述代码修改，el-tree 组件会根据 API 返回的 ID 列表，自动选中对应 ID 的节点。

注意事项：

• 确保 resId 属性是你 el-tree 数据源中节点的唯一标识符。
• API 返回的 ID 列表需要进行格式化，例如使用 split(',') 将字符串转换成数组。
• 可以根据实际需要，调整代码逻辑，例如将选中状态保存到本地存储，以便在页面刷新后仍然保持选中状态。

其他相关信息：

• Element UI el-tree 文档： https://element.eleme.cn/#/en-US/component/tree
• Vue.js 文档： https://vuejs.org/

希望本文能帮助你实现 el-tree 组件的选中节点功能。如果你还有其他问题，请随时提问。