vue el-tree 清空数

最新推荐文章于 2024-07-10 15:42:45 发布

原创最新推荐文章于 2024-07-10 15:42:45 发布 · 2.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #el-tree

前端专栏收录该内容

66 篇文章

订阅专栏

本文介绍如何在Element UI中使用树形组件实现懒加载功能，通过监听节点点击事件来动态加载子节点数据，同时提供了清空树并重新加载的方法。代码示例展示了如何在Vue项目中配置和使用该功能。

<el-tree
                :props="props"
                :load="loadNode"
                ref="tree"
                lazy
                accordion
                @node-click="handleNodeClick">
              </el-tree>

布局

export default {
data() {
    return {
      node_had: undefined,
      resolve_had : undefined
      }
}
  methods: {
 loadNode(node, resolve) {
        if (node.level === 0) {
          this.node_had = node // 保存一下根节点
          this.resolve_had = resolve // 保存一下根节点
          console.log('节点是根节点id=' + this.rootId +' 名字====' + this.rootName);
          return resolve([{ MDM_ORG_CODE:this.rootId,ORG_NAME: this.rootName }]);
        }else{
          console.log("获取到的node=" + node.data.MDM_ORG_CODE);
          let paraobj = node.data.MDM_ORG_CODE ;
          this.commonSearchT(paraobj, resolve);
        }
      },
clearTree(){// 清空树的方法
      this.node_had.childNodes = [];
      this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
    }
}