Vue Element UI el-tree默认选中节点-实现菜单权限授权

本文将介绍如何在Vue Element UI中使用el-tree组件实现菜单权限授权功能，并解决默认选中getMenuString返回值的问题。

问题描述:

通过getMenuString查询到的结果是字符串格式，例如：'1678656829503172608,1680751128491327488'。
通过getResPageT查询到的是整个树结构。
目标：在打开树的时候默认选中getMenuString返回的值。

解决方案:

问题1解答: 可以在获取到getResPageT查询结果后，遍历整个树的节点，将节点的resId与getMenuString的返回值进行比较，如果相同则设置节点的checked属性为true，从而实现默认选中。

function handleQueryResTree() { 
    loading.value = true;
    getResPageT(queryParams2)
        .then((data: any) => {
            treeData.splice(0);
            treeData.push(...data.data);
            
            // 默认选中getMenuString的返回值
            const menuIds = data.split(','); // 假设data是字符串格式
            treeData.forEach(node => {
                if (menuIds.includes(node.resId)) {
                    node.checked = true;
                }
            });
        })
        .finally(() => {
            loading.value = false;
        });
}

问题2解答: 报错'TypeError: data.split is not a function'说明data并不是一个字符串，而是一个对象。您可以在getMenuString的返回值处进行修改，将返回的字符串转为数组。

function openDialog_dataScope(roleId?: string) {
    handleQueryResTree();
    getMenuString({ roleId })
        .then((data: any) => {
            const menuIds = data.data.split(','); // 假设data.data是字符串格式
            treeList.push(...menuIds);
        })
        .finally(() => {
            loading.value = false;
        });

    dialog2.visible = true;
    dialog2.title = '授权菜单';
}

这样就可以将返回的字符串转为数组，并将数组push到treeList中了。

总结:

通过以上步骤，您可以成功地实现Vue Element UI el-tree组件的默认选中功能，并有效地解决菜单权限授权问题。

注意:

以上代码中的data.split(',')和data.data.split(',')假设data和data.data都是字符串格式。请根据您的实际情况进行修改。
在实际应用中，您可能需要根据您的需求对代码进行进一步调整。
确保getMenuString和getResPageT方法的返回值类型与您的预期一致。

希望本文对您有所帮助。如果您有任何问题或建议，请随时评论。