el-tree实现懒加载，并查询显示当前节点及所有子节点

html代码：

<el-tree
      class="common-filter-tree fx-flex-auto mt15 overflow-auto"
      :props="defaultProps"
      :filter-node-method="filterNode"
      :load="loadNode"
      lazy
      ref="tree"
    >
      <div style="width: 100%;" slot-scope="{ data }">
        <div class="fx-row fx-between-center" style="width: 100%;">
          <div style="display: flex; align-items: center;">
            <img
              v-if="data.type === 'base'"
              src="../../assets/icon/basis/水电站2.png"
            />
            <span style="margin-left: 10px;display: inline-block">
              <el-tooltip
                class="item"
                effect="dark"
                :content="data.label"
                placement="top"
                v-if="data.label.length > 10"
              >
                <span>{
     {
      data.label.substring(0, 9) }}...</span>
              </el-tooltip>
              <span v-else>{
     {
      data.label }}</span>
            </span>
          </div>
          <div class="tree-node-badge ph11 mr10">
            {
     {
      data.count ? data.count : 0 }}
          </div>
        </div>
      </div>
    </el-tree>

js代码：

data() {
     
    return {
     
      filterText: "",
      defaultProps: {
     
        children: "children",
        label: "label",
        isLeaf: "leaf"
      }
    };
  },
  methods: {
     
    onInputChange(event) {
     
      this.$refs.tree.filter(event);
    },
    filterNode(value, data, node) {
     
      //查询显示当前节点
      /*if (!value) return true;
      return data.label.indexOf(value) !== -1;*/
		
	  //如果共有三级菜单，查询显示当前节点及所有子节点
      if (!value) return true;
      let if_one = data.label.indexOf(value) !== -1;
      let if_two =
        node.parent &&
        node.parent.data &&
        node.parent.data.label &&
        node.parent.data.label.indexOf(value) !== -1;
      let if_three =
        node.parent &&
        node.parent.parent &&
        node.parent.parent.data &&
        node.parent.parent.data.label &&
        node.parent.parent.data.label.indexOf(value) !== -1;
      let result_one = false;
      let result_two = false;
      let result_three = false;
      if (node.level === 1) {
     
        result_one = if_one;
      } else if (node.level === 2) {
     
        result_two = if_one || if_two;
      } else if (node.level === 3) {
     
        result_three = if_one || if_two || if_three;
      }
      return result_one || result_two || result_three;
    },
    
    getTreeData(node, fn) {
     
      queryBasinTree(node)
        .pipe(
          map(data => {
     
            fn(data);
          })
        )
        .subscribe();
    },
    
    loadNode(node, resolve) {
     
      if (node.level === 0) {
     
        const baseTree = JSON.parse(sessionStorage.getItem("baseData"));
        if (baseTree) {
     
          return resolve(baseTree);
        } else {
     
          this.getTreeData({
      type: "", id: "" }, data => {
     
            return resolve(data ? data : []);
          });
        }
      } else {
     
        this.getTreeData({
      type: node.data.type, id: node.data.id }, data => {
     
          if (data) {
     
            data.forEach(
              item =>
                (item.leaf =
                  item.type === "river" ? item.type === "river" : !item.count)
            );
            return resolve(data);
          }
        });
      }
      return resolve([]);
    }
  }

数据返回格式：

实现效果：