vue-Element 懒加载树的案例

 当项目中节点树内容很多需要按需加载,用户点击那个加载他的下一级,可以使用下面得案例,

有个特别需要注意的就是加入没有下一级,而后台没有给返回相对应的参数后者直接但会的数据变成空的时候,直接

 return resolve([]);返回[]数组就好了!!!

<template>
  <div id="posu">
    <el-row>
      <el-col :span="8" style="padding:0 5px;">
        <div class="y_title" id="org_title">
          <span>组织架构</span>
        </div>
        <el-tree
          ref="orgTree"
          :props="defaultProps"
          class="filter-tree w_tree org_tree"
          :load="loadOrg"
          lazy
        />
      </el-col>
      <el-col :span="16">
        <div class="y_title">
          <span>组织范围：全部</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import sysUserApi from "@/api/system/user";
import request from "@/utils/request";

export default {
  components: {},
  data() {
    return {
      orgParam: {
        orgCode: "000002000008000006000012000046000001",
        orgId: "166c937f-e27d-4450-a4e5-cb4cfc5122b8"
      },

      orgWidth: 0,
      defaultProps: {
        label: "orgName",
        isLeaf:"isLeaf"
      }
    };
  },
  created() {},
  mounted() {
    let w_width = document.getElementById("org_title").clientWidth;
    this.orgWidth = "width:" + (w_width + 1) + "px;";
  },
  methods: {
    loadOrg(node, resolve) {
      console.log(node);
      let param = {};
      if (node.data === undefined) {
        param.orgId = "bf1a8f4e-57f3-11e7-87fa-0050569a68e4";
      } else {
        param.orgId = node.data.orgId;
      }

      request.post("/org/query-children", param).then(result => {
        //初次加载，只加载根节点
        let array = this.orgFilter(result.datalist, node.data === undefined);
        return resolve(array);
      });
    },
    orgFilter(data, isRoot) {
      let orgArray = [];

      data.forEach(element => {
        element.isLeaf = element.hasChildren == "1" ? false : true;
        if (isRoot) {
          if (element.parentId == null) {
            orgArray.push(element);
          }
        } else {
          if (element.parentId != null) {
            orgArray.push(element);
          }
        }
      });
      return orgArray;
    }
  }
};
</script>
<style>
.org_tree {
  /* width: 450px; */
  position: relative;
  top: 0;
}
</style>