Element UI el-tree 组件默认选中节点设置 - 使用 default-checked-keys 属性

在使用 Element UI 的 el-tree 组件时，我们常常需要根据特定条件默认选中某些节点。本文将介绍如何使用 `default-checked-keys` 属性来实现这一功能。

假设我们通过 `getResPageT` 查询到整个树结构数据，存储在 `treeData` 变量中。同时，通过 `getMenuString` 获取到的结果是字符串形式的节点 ID 列表，例如：`data: '1678656829503172608,1680751128491327488'`。

为了将这个字符串结果转换为 el-tree 组件需要的数组格式，我们需要进行一些处理，将每个 ID 存入数组中，并将数组命名为 `treeList`。最终 `treeList` 数组应该类似于 `{0: '1678656829503172608', 1: '1680751128491327488'}`。

现在，我们想要在 el-tree 展开时自动选中 `treeList` 数组中指定的节点。可以使用 `default-checked-keys` 属性来实现这个功能，只需将 `treeList` 数组绑定到该属性即可。

在代码中：

• `:data="treeData"`: 将树结构数据绑定到 el-tree 组件。
• `show-checkbox`: 显示复选框，以便用户可以手动选择节点。
• `default-expand-all`: 默认展开所有节点。
• `:default-checked-keys="treeList"`: 设置默认选中的节点，绑定到 `treeList` 数组。
• `node-key="resId"`: 指定每个节点的唯一标识符，用于匹配默认选中节点。
• `highlight-current`: 选中当前节点时突出显示。
• `:props="defaultProps"`: 设置节点的配置属性，例如 label、children 等。
• `@node-click="handleClick"`: 监听节点点击事件。

确保 `treeList` 数组中的值与 `treeData` 数据中节点的 `resId` 属性匹配，这样才能正确选中节点。