vueelementel-tree树设置懒加载和设置默认勾选

JAY.LIN 收录于 Vue

2025-03-06 约 1373 字预计阅读 3 分钟

https://bing.ee123.net/img/rand?artid=146069870

vue+element|el-tree树设置懒加载和设置默认勾选

导文

在实际开发中，很多数据过于庞大，需要分批请求，使用到懒加载。但是在tree的方法中，使用懒加载后无法直接使用default-checked-keys默认勾选。想要这个效果该如何实现？

效果展示：

代码实现

在 Vue 项目中使用 Element UI 的 el-tree 组件时，树形数据的懒加载和默认勾选功能是常见的需求。以下是如何实现这两种功能的详细步骤：

1. 基本结构

el-tree 是 Element UI 提供的树形组件，支持懒加载、节点勾选等功能。以下是组件的基本结构：

<el-drawer v-if="drawerVisible" v-model="drawerVisible" title="角色权限" size="50%">
  <el-tree
    ref="tree"
    :props="treeProps"
    :load="loadNode"
    lazy
    show-checkbox
    node-key="id"
    :default-checked-keys="defaultCheckedKeys"
    @check="onCheckChange"
  />
</el-drawer>

关键属性说明：

lazy ：启用懒加载模式。
load ：懒加载数据的方法。
show-checkbox ：显示节点复选框。
node-key ：节点的唯一标识字段。
default-checked-keys ：默认勾选的节点 ID 数组。
@check ：节点勾选状态变化时触发的事件。

2. 懒加载实现

懒加载的核心是通过 load 方法动态加载节点数据。以下是一个示例：

methods: {
  loadNode(node, resolve) {
    if (node.level === 0) {
      // 加载根节点
      resolve([
       ..//数据列表
      ]);
    } else if (node.level === 1) {
          resolve([
            ..//数据列表
        ]);
    } else {
      // 其他层级返回空数组
      resolve([]);
    }
  }
}

实现逻辑：

根节点加载 ：当 node.level === 0 时，返回根节点数据。
子节点加载 ：根据父节点的 id 返回对应的子节点数据。
叶子节点标记 ：通过 leaf: true 标记节点为叶子节点，避免进一步加载。

3. 默认勾选功能

通过 default-checked-keys 属性，可以设置默认勾选的节点。该属性接收一个数组，数组中的值为需要勾选的节点 ID。

data() {
  return {
    defaultCheckedKeys: ['role', 'user-list'] // 默认勾选的节点 ID
  };
}

在树加载完成后， el-tree 会自动勾选 defaultCheckedKeys 中指定的节点。

4. 动态加载初始节点

某些场景下需要在树加载完成后自动展开某些节点。可以通过 ref 获取树实例，并调用 expand 方法实现：

methods: {
  openDrawer() {
    this.drawerVisible = true;
    //第一种实现方法
    this.$nextTick(() => {
      this.loadInitialNodes();
    });
    //第二种实现方法
   setTimeout(() => {
        this.loadInitialNodes()
      }, 500)
  },
  loadInitialNodes() {
    if (this.$refs.tree) {
      // 展开根节点的所有子节点
      this.$refs.tree.root.childNodes.forEach(node => {
        node.expand();
      });
    }
  }
}

实现逻辑：

在 openDrawer 方法中，打开抽屉并等待 DOM 更新完成后调用 loadInitialNodes 。
在 loadInitialNodes 中，通过 this.$refs.tree 获取树实例，并遍历根节点的子节点，调用 expand 方法展开节点。

5. 节点勾选事件监听

通过 @check 事件可以监听节点勾选状态的变化。事件回调函数会返回当前勾选的节点数据和节点对象。

methods: {
  onCheckChange(checkedData, checkedStatus) {
    console.log('当前勾选的节点数据:', checkedData);
    console.log('当前勾选状态:', checkedStatus);
  }
}

参数说明：

checkedData ：当前勾选的节点数据。
checkedStatus ：包含勾选状态信息的对象，如 checkedKeys （勾选的节点 ID 数组）、 halfCheckedKeys （半勾选的节点 ID 数组）等。

完整代码

以下是完整的代码实现：

<template>
  <el-drawer v-if="drawerVisible" v-model="drawerVisible" title="角色权限" size="50%">
    <el-tree
      ref="tree"
      :props="treeProps"
      :load="loadNode"
      lazy
      show-checkbox
      node-key="id"
      :default-checked-keys="defaultCheckedKeys"
      @check="onCheckChange"
    />
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      treeProps: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      defaultCheckedKeys: ['role', 'user-list']
    };
  },
  methods: {
    openDrawer() {
      this.drawerVisible = true;
     //第一种实现方法
    this.$nextTick(() => {
      this.loadInitialNodes();
    });
    //第二种实现方法
   setTimeout(() => {
        this.loadInitialNodes()
      }, 500)
    },
     loadNode(node, resolve) {
    if (node.level === 0) {
      // 加载根节点
      resolve([
       ..//数据列表
      ]);
    } else if (node.level === 1) {
          resolve([
            ..//数据列表
        ]);
    } else {
      // 其他层级返回空数组
      resolve([]);
    }
  },
    loadInitialNodes() {
      if (this.$refs.tree) {
        this.$refs.tree.root.childNodes.forEach(node => {
          node.expand();
        });
      }
    },
    onCheckChange(checkedData, checkedStatus) {
      console.log('当前勾选的节点数据:', checkedData);
      console.log('当前勾选状态:', checkedStatus);
    }
  }
};
</script>

通过结合 lazy 、 load 、 default-checked-keys 等属性， el-tree 提供了强大的功能，能够实现树形数据的懒加载、节点默认勾选和动态展开等需求。根据实际场景，可以灵活使用这些功能来满足需求。

您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。