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([]);
    }
  }

数据返回格式:

在这里插入图片描述
实现效果:
在这里插入图片描述

在这里插入图片描述

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现 el-tree懒加载功能,你可以按照以下步骤进行操作: 1. 配置数据源:首先,你需要配置一个异步数据源,用于提供懒加载的数据。这可以是一个后端接口,返回符合 el-tree 要求的节点数据。 2. 设置懒加载属性:在 el-tree 组件中,设置 `lazy` 属性为 `true`,开启懒加载功能。 3. 实现加载方法:创建一个方法,用于根据节点的信息从数据源中获取子节点数据。可以使用 `load` 属性来指定这个方法。这个方法应该接收一个参数,代表当前节点的数据对象,并返回一个 Promise 对象来异步获取子节点数据。 4. 更新节点数据:在加载方法中,通过调用 `resolve` 方法将获取到的子节点数据传递给它,以更新节点子节点。 这是一个简单的示例代码,演示了如何实现 el-tree懒加载: ```vue <template> <el-tree :data="treeData" :load="loadTreeData" :lazy="true"></el-tree> </template> <script> export default { data() { return { treeData: [] // 初始化数据为空 } }, methods: { loadTreeData(node, resolve) { // 调用异步接口获取子节点数据 axios.get('/api/getChildren', { params: { nodeId: node.id } }) .then(response => { const children = response.data.children; // 更新节点子节点数据 resolve(children); }) .catch(error => { console.error('Failed to load tree data:', error); }); } } } </script> ``` 在上述示例中,`loadTreeData` 方法使用 axios 发起异步请求,根据当前节点的 id 获取子节点数据,并将数据通过 `resolve` 方法传递给 el-tree 组件,以更新节点子节点。 你可以根据自己的实际情况,调整数据源和加载方法的实现。希望这个示例能帮助你实现 el-tree懒加载功能!如有更多问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值