el-tree实现懒加载和根据默认选中的下级节点反向渲染展开树完整代码

在实现`el-tree`的懒加载功能时，通常会使用`load`属性来指定节点加载数据的方法。对于默认选中的下级节点反向渲染展开树，则需要在组件初始化时，根据已知的选中节点向上遍历并展开其祖先节点。以下是一个使用Element UI的`el-tree`组件实现该功能的示例代码：

<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    :load="loadNode"
    :default-expanded-keys="defaultExpandedKeys"
    :default-checked-keys="defaultCheckedKeys"
    show-checkbox
    ref="tree"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [], // 树形数据
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      // 默认展开的节点ID数组，用于懒加载时展开已选中的下级节点
      defaultExpandedKeys: [],
      // 默认选中的节点ID数组
      defaultCheckedKeys: []
    };
  },
  methods: {
    // 加载节点数据的方法
    loadNode(node, resolve) {
      // 模拟异步加载数据
      setTimeout(() => {
        const data = {
          label: node.label,
          children: [
            { label: '节点1' },
            { label: '节点2' },
            { label: '节点3' },
          ],
        };
        resolve(data.children);
      }, 1000);
    },
    // 初始化数据和展开/选中状态
    initTreeData() {
      constCheckedKeys: ['nodeId1'] // 假设这是默认选中的节点ID
      // 填充数据，并根据defaultCheckedKeys设置defaultExpandedKeys
      this.fillDataAndExpand(this.defaultCheckedKeys);
    },
    // 填充数据并根据选中的节点反向展开
    fillDataAndExpand(selectedNodeIds) {
      this.defaultExpandedKeys = [];
      selectedNodeIds.forEach((nodeId) => {
        const node = this.findNodeById(this.data, nodeId);
        if (node) {
          this.expandAncestors(node.parent);
          this.defaultExpandedKeys.push(nodeId);
        }
      });
    },
    // 找到节点对象
    findNodeById(data, nodeId) {
      for (const item of data) {
        if (item.id === nodeId) {
          return item;
        }
        if (item.children) {
          const childNode = this.findNodeById(item.children, nodeId);
          if (childNode) {
            return childNode;
          }
        }
      }
      return null;
    },
    // 展开节点的祖先节点
    expandAncestors(node) {
      if (node) {
        this.defaultExpandedKeys.unshift(node.id); // 将当前节点ID添加到展开数组的最前面
        this.expandAncestors(node.parent); // 递归展开更上层的节点
      }
    }
  },
  mounted() {
    this.initTreeData();
  }
};
</script>

在这个示例中，我们定义了`defaultExpandedKeys`和`defaultCheckedKeys`来控制默认的展开和选中状态。`initTreeData`方法用于初始化树形数据，并根据默认选中的节点ID来设置展开的节点。`fillDataAndExpand`方法遍历默认选中的节点ID，并调用`expandAncestors`方法来递归地找到并展开这些节点的祖先节点。

请根据你的具体需求调整上述代码中的数据结构和逻辑。此外，如果你使用的是Element Plus（Element UI的Vue 3版本），请确保代码与该版本兼容。