【vue+elementUI】根据数据默认展开图层树指定节点，default-expanded-keys

需求：根据传入数据默认展开图层树，数据中isLoad为true表示当前节点需要展开。（数据不定）

参考elementUI组件el-tree的default-expanded-keys使用，将要展开的节点标识（树的id）绑定到该属性。

重点：实际传入数据是以Id字段作为树的标识，同时数据为多层嵌套的图层，需要逐层筛选。

      <el-tree
        id="lay-tree"
        :props="defaultProps"//配置选项，用来关联实际字段
        :data="treedata"//图层树数据
        node-key="Id"//绑定数据中的实际标识字段
        :default-expanded-keys="expandedKeys"//默认展开节点
        ref="layerTree"
      ></el-tree>

data参数：

  data() {
    return {
      treedata: [],
      expandedKeys: [],
      defaultProps: {
        children: "children",
        label: "text",
        id: "Id",
        IlayerTrans: "sort"
      },
    };
  }

接下来就是在根据图层树数据treeData获取到指定展开节点expandedKeys数组：

  watch: {
    treedata: {
      handler() {
       this.getExpandedKeys(this.treedata);
      },
      deep: true
    }
  },
  methods: {
    getExpandedKeys(arr) {
      arr.forEach(item => {
        if (item.Isload) {
          this.expandedKeys.push(item.Id);
        }
        if (item.children) {
          this.getExpandedKeys(item.children);
        }
      });
    }
  }

最后为传入的图层树数据结构：