【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);
        }
      });
    }
  }

最后為傳入的圖層樹數據結構：