elementui tree 设置选中和展开父级

最新推荐文章于 2024-06-05 16:01:17 发布

原创最新推荐文章于 2024-06-05 16:01:17 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #前端

本文介绍了在ElementUI中如何设置Tree组件的选中和展开状态，包括设置node-key和ref的重要性，以及如何通过节点ID来实现选中和展开功能。同时，针对在IE浏览器中可能出现的卡顿问题，提出了循环遍历控制节点展开和收起的解决方案。

1. tree必须设置node-key和ref。

 <el-tree :data="data" ref="leftTree" node-key="typeID" :render-after-expand="needClick" :props="defaultProps" :highlight-current="!needClick" @node-click="handleNodeClick" accordion :expand-on-click-node="needClick" ></el-tree>

2. 通过id设置选中和展开

this.$nextTick(() => {
    this.$refs.leftTree.setCurrentKey(id);
    var selected = this.$refs.leftTree.getCurrentNode();
    if (this.$refs.leftTree.getNode(selected) && this.$refs.leftTree.getNode(selected).parent) {
      this.expandParents(this.$refs.leftTree.getNode(selected).parent);
    }
  });


expandParents(node) {
    node.expanded = true;
    if (node.parent) {
      this.expandParents(node.parent);
    }
  }

2. 循环遍历控制节点的展开和收起（ie卡顿）

for (var i = 0; i < this.$refs.leftTree.store._getAllNodes().length; i++) {
    let item = this.$refs.leftTree.store._getAllNodes()[i];
    // id就是选中的节点 
    if (item.data.id == id ) {
      this.$nextTick(() => {
        this.$refs.leftTree.setCurrentKey(item.data.id);
        var selected = this.$refs.leftTree.getCurrentNode();
        if (this.$refs.leftTree.getNode(selected) && this.$refs.leftTree.getNode(selected).parent) {
          this.expandParents(this.$refs.leftTree.getNode(selected).parent);
        }
      });
    } else {
      this.$refs.leftTree.store._getAllNodes()[i].expanded = false;
    }
  }