element tree树形懒加载

<el-tree  class="filter-tree"  :props="defaultProps" :load="loadNode" ref="tree" lazy >
                <span
                  @click="handleNodeClick(data, node)"
                  class="custom-tree-node span-ellipsis"
                  :title="node.label"
                  slot-scope="{ node, data }"
                >
                  <span>
                    <i v-if="data.type == '1'" :class="data.icon"></i
                    ><span style="margin-left: 8px">{{ node.label }}</span>
                  </span>
                </span>
              </el-tree>
import { getdeptlist,getuserlist} from "../api/home";

data(){
   return:{
          defaultProps: {
        children: "zones",
        label: "abbrname",
        isLeaf: "leaf",
      },
  }
}
method:{
        async loadNode(node, resolve) {
      let that = this;
      if (node.level === 0) {
        let arr = await that.getdatalist();
        return resolve(arr);
      }
      if (node.level >= 1) {
        let arr1 = await that.getChildByList(node.data.id, resolve);
        return resolve(arr1);
      }
    },
    //获取树形图
    async getdatalist() {
      let res = await getdeptlist({deptid:''});
      if (res.code == 200) {
        let data = res.data;
        data.forEach((item) => {
          item.parentid = item.parentid;
          item.id = item.id;
          item.isLeaf = true;
        });
        return data;
      }
      return [];
    },
    async getChildByList(_parentID) {
      // 获取子节点请求
      let params={
          deptid:_parentID
      }
      let res = await getdeptlist(params);
      if (res.code == 200) {
        let data = res.data;
        data.forEach((item) => {
          item.parentid = item.parentid;
          item.id = item.id;
          item.isLeaf = false;
        });
        return data;
      }
      return [];
    },
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容