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

使用 default-checked-keys 属性默认选中 el-tree 节点

在 Element UI 的 el-tree 组件中，可以使用 default-checked-keys 属性来指定默认选中的节点。该属性的值应该是一个数组，包含所有需要默认选中的节点的 key 值。

案例：根据 getMenuString 返回值默认选中节点

假设你有一个名为 getMenuString 的方法，用于获取需要默认选中的节点 ID，例如：

function getMenuString(roleId?: string) {
  // ...
  return '1678656829503172608,1680751128491327488';
}

你可以通过以下步骤，将 getMenuString 返回的值设置为 treeList，并在 el-tree 组件中使用 default-checked-keys 属性默认选中节点：

1. 获取节点 ID： 在打开 el-tree 组件之前，调用 getMenuString 获取需要默认选中的节点 ID。

2. 更新 treeList： 将 getMenuString 返回的字符串转换为数组，并更新 treeList 变量。

3. 使用 default-checked-keys 属性： 在 el-tree 组件的 default-checked-keys 属性中使用 treeList，即可默认选中相应的节点。

以下是修改后的代码示例：

function openDialog_dataScope(roleId?: string) {
  handleQueryResTree();
  getMenuString({ roleId })
    .then((data: any) => {
      treeList.splice(0); // 清空数组
      treeList.push(...data.split(',')); // 将返回的字符串转为数组
    })
    .finally(() => {
      loading.value = false;
    });

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

// ...

<el-tree :data='treeData' show-checkbox default-expand-all :default-checked-keys='treeList' node-key='resId' highlight-current :props='defaultProps' @node-click='handleClick' />

这样在打开树的时候，getMenuString 返回的节点将会默认选中。

注意：

• 确保 treeList 的数据类型为数组，并且包含所有需要默认选中的节点的 key 值。
• node-key 属性指定了节点的唯一标识符，它应该与 getMenuString 返回的节点 ID 相匹配。
• 如果你需要在 el-tree 组件打开后动态修改 treeList，你需要使用 $nextTick 方法，确保在 DOM 更新完成后再进行修改。

代码示例

以下是一个完整的代码示例，展示了如何使用 default-checked-keys 属性默认选中 el-tree 节点：

<template>
  <div>
    <el-button @click='openDialog_dataScope'>打开授权菜单</el-button>
    <el-dialog v-model='dialog2.visible' title='授权菜单' width='50%'>
      <el-tree :data='treeData' show-checkbox default-expand-all :default-checked-keys='treeList' node-key='resId' highlight-current :props='defaultProps' @node-click='handleClick' />
    </el-dialog>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const loading = ref(false);
    const treeData = ref([]);
    const treeList = ref([]);
    const dialog2 = ref({ visible: false, title: '' });
    const queryParams2 = {};
    const defaultProps = { children: 'children', label: 'resName' };

    // 获取树数据
    const getResPageT = (queryParams: any) => {
      // ...
    };

    // 获取需要默认选中的节点 ID
    const getMenuString = (roleId?: string) => {
      // ...
      return '1678656829503172608,1680751128491327488';
    };

    const handleQueryResTree = () => {
      loading.value = true;
      getResPageT(queryParams2)
        .then((data: any) => {
          treeData.splice(0); // 清空数组
          treeData.push(...data.data);
        })
        .finally(() => {
          loading.value = false;
        });
    };

    const openDialog_dataScope = (roleId?: string) => {
      handleQueryResTree();
      getMenuString({ roleId })
        .then((data: any) => {
          treeList.splice(0); // 清空数组
          treeList.push(...data.split(',')); // 将返回的字符串转为数组
        })
        .finally(() => {
          loading.value = false;
        });

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

    // ...

    return {
      loading,
      treeData,
      treeList,
      dialog2,
      queryParams2,
      defaultProps,
      handleQueryResTree,
      openDialog_dataScope,
      // ...
    };
  }
};
</script>

这个示例展示了如何使用 default-checked-keys 属性默认选中 el-tree 节点，以及如何根据 getMenuString 获取需要默认选中的节点 ID。你可以在这个示例的基础上根据自己的需求进行调整。