elementUI中tree组件懒加载之增删改查使用

五只小狗

已于 2022-04-02 14:19:04 修改

阅读量1.4k

点赞数

分类专栏： web开发 js 文章标签： spring

于 2022-04-01 19:20:39 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43898141/article/details/123905476

版权

web开发同时被 2 个专栏收录

25 篇文章

订阅专栏

11 篇文章

订阅专栏

本文详细介绍了如何在 ElementUI 中使用 Tree 组件实现懒加载功能，包括配置 props、load 方法、节点操作按钮等。通过示例代码展示了节点的加载、刷新、增删改查操作，适用于文件系统或层级结构的数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果是elementUI中tree组件懒加载看我之前写的个人感觉很清楚了
传送阵

废话不多说

 <el-tree
          class="filter-tree"
          :props="propsOne"
          :load="loadNode"
          lazy
          :filter-node-method="filterNode"
          highlight-current
          :expand-on-click-node="false"
          ref="tree">
        <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>
          <i class="el-icon-folder-opened" v-if="node.data.type === '0'"></i>
          <i class="el-icon-document" v-if="node.data.type === '1'"></i>
           {{ node.label }}</span>
        <span>
           <!-- 添加文件-->
             <el-button
               v-if="node.data.type === '0'"
               type="text"
               size="mini"
               @click="add(node,data)">
           <i class="el-icon-plus"></i>
          </el-button>
          <!--修改文件-->
          <el-button
            type="text"
            size="mini"
            @click="amend(node,data) ">
            <i class="el-icon-edit-outline"></i>
          </el-button>
          <!-- 下载文件-->
          <el-button v-if="node.data.type ==='1'"
                     type="text"
                     size="mini"
                     @click=" ">
            <i class="el-icon-download"></i>
          </el-button>
          <!-- 上传文件-->
          <el-button
            v-if="node.data.type === '0'"
            type="text"
            size="mini"
            @click="fileClick(node,data)">
            <i class="el-icon-upload"></i>
          </el-button>
          <!--删除文件-->
          <el-button
            type="text"
            size="mini"
            @click="del(node,data)" v-if="node.data.leaf">
            <i class="el-icon-delete"></i>
          </el-button>
        </span>
        </span>
        </el-tree>

 data() {
    return {
      propsOne: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf',
      }
    };
  },
 methods: {
 loadNode(node, resolve) {
      let arr = [];
      if (node.level === 0) {
        this.queryParams.parentId = 0;
        this.queryParams.fileType = 0;
      } else {
        this.queryParams.parentId = node.data.id;
        this.queryParams.fileType = 0;
      }
      listStores(this.queryParams).then(response => {
        this.loading = false;
        response.data.map(function (value) {
          arr.push({
            "name": value.fileName,
            "id": value.id,
            "leaf": value.leaf,
            "type": value.type,
            "fileType": value.fileType,
            "parentId": value.parentId,
          })
        });
        resolve(arr);
      });
    },
 }

修改后刷新

    //刷新父树结构
    this.node.parent.loaded = false;
    this.node.parent.expand();

之后的增删改查写方法就可以了，写自己的逻辑
效果
在这里插入图片描述

elementUI中tree组件 懒加载之增删改查 使用

elementUI中tree组件懒加载之增删改查使用