elementUi的树tree组件的使用

最新推荐文章于 2024-07-23 17:35:39 发布
最新推荐文章于 2024-07-23 17:35:39 发布
阅读量3.7k 收藏 6
点赞数
分类专栏： vue-踩坑记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43191061/article/details/105882586
版权

element-ui的tree的使用

数据源的构造通用方法

树结构数据通用结构样例：

[
 {
      id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      },
     {
         id: 2,
         label: '一级 2',
         children: [{
           id: 5,
           label: '二级 2-1'
         }, {
           id: 6,
           label: '二级 2-2'
         }]
       },
      {
         id: 3,
         label: '一级 3',
         children: [{
           id: 7,
           label: '二级 3-1'
         }, {
           id: 8,
           label: '二级 3-2'
         }]
      }
    ]

通用list数据源样例（能分辨父子关系的list）：

listTreeData: [
        {
          id:'1',  
          name: '根目录',  
          parentCode:'-1',// 根目录标志
          catalogId :'111111', // 目录标识
        },
        {
          id:'2',
          name:'目录1',
          parentCode:'111111',
          catalogId:'aaaaaa',
        },
        {
          id:'3',
          name:'目录2',
          parentCode:'111111',
          catalogId:'bbbbbb',
        },
        {
          id:'4',
          name:'目录3',
          parentCode:'111111',
          catalogId:'cccccc',
        },
        {
          id:'1-1',
          name:'目录1-1',
          parentCode:'aaaaaa',
          catalogId:'dddddd',
        },
        {
          id:'1-2',
          name:'目录1-2',
          parentCode:'aaaaaa',
          catalogId:'eeeeee',
        },
        {
          id:'1-3',
          name:'目录1-3',
          parentCode:'aaaaaa',
          catalogId:'ffffff',
        },
        {
          id:'1-4',
          name:'目录1-4',
          parentCode:'aaaaaa',
          catalogId:'gggggg',
        },
        {
          id:'2-1',
          name:'目录2-1',
          parentCode:'bbbbbb',
          catalogId:'iiiii',
        },
        {
          id:'2-2',
          name:'目录2-2',
          parentCode:'bbbbbb',
          catalogId:'jjjjjj',
        },
        {
          id:'2-3',
          name:'目录2-3',
          parentCode:'bbbbbb',
          catalogId:'kkkkkk',
        },
        {
          id:'2-4',
          name:'目录2-4',
          parentCode:'bbbbbb',
          catalogId:'lllll',
        },
        {
          id:'3-1',
          name:'目录3-1',
          parentCode:'cccccc',
          catalogId:'333333',
        },
        {
          id:'3-2',
          name:'目录3-2',
          parentCode:'cccccc',
          catalogId:'55555',
        },
        {
          id:'3-3',
          name:'目录3-3',
          parentCode:'cccccc',
          catalogId:'666666',
        },
        {
          id:'3-4',
          name:'目录3-4',
          parentCode:'cccccc',
          catalogId:'7777777',
        }
      ]

list数据转树结构数据通用方法：

// 将list 结构的数据转成tree结构
    // myId 表示当前结点的唯一值
    // pId 表示父节点的唯一值
    // list list数据源 含有父子关系的数据源
    list2Tree:function(myId,pId,list)
    {
      debugger;
      var nodes = [] ;
      // get the top level
      for(var i=0;i<list.length;i++)
      {
        var row = list[i];
        if( !this.exists(list,row[pId],myId))
        {
            row.label = row.name;
            nodes.push(row);
        }
      }
      var toDo = [] ;
      for(var j=0 ;j<nodes.length;j++)
      {
        toDo.push(nodes[j]);
      }

      while(toDo.length)
      {
          var node = toDo.shift();// the parent node
          // get the children node 
          for(var k=0;k<list.length;k++)
          {
            var row1 = list[k];
            if(  row1[pId] == node[myId] )
            {
                row1.label = row1.name;  // label为树节点显示的名字，若list数据中已经存在label了，则此处可以不用，无id这个字段则需要跟这个类似处理  
                if(node.children)
                {
                  node.children.push(row1);
                }
                else
                {
                  node.children =[row1];
                }
                 toDo.push(row1);
            }
            
          }
      }
      return nodes ;
    },
    exists:function(list,parentId,myId)
    {
        for(var i=0;i<list.length;i++)
        {
          if(list[i][myId] === parentId)
          {
              return true;
          }
        }
        return false ;
    },

通用方法处理参考资源路径如下：https://www.cnblogs.com/guoyansi19900907/p/7490160.html

转化后的tree结构数据源和树通用样例结构一直，数据中必须存在id,label,children。

对树节点的过滤处理方法

filter-node-method：
对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏

具体的方法说明以及树的使用，可以参考以下资源路径：https://element.eleme.cn/#/zh-CN/component/tree

本人亲测方案完整方案如下：

<template>
<div class="treePlane">
    <div class="filterPlane" >
        <el-row>
            <el-col :span='6'>
                <el-input v-model="name" placeholder='请输入'/>
            </el-col> 
            <el-col :span='6'>
                <el-button @click="search" >查询</el-button>
            </el-col> 
             <el-col :span='4'>
                <el-button @click="reset">重置</el-button>
            </el-col> 
        </el-row>
       
    </div>
    <el-tree
        :data="transformData"
        ref="treeComponent"
        show-checkbox
        :default-expand-all=true
        :filter-node-method="filterNode"
        node-key="name">
    </el-tree>
</div>
</template>
<script>
import tree from '@/assets/js/treeData.js'


export default {

  mixins: [tree],
  data () {
    return {
      name: '',
      transformData:[],
    }
  },
  created:function() {
      this.init();
  },
  methods:
  {
    init: function (isInit) {
        if(!isInit)
        {
          this.transformData =[];
        }
        var a = 'catalogId' ;
        var b= 'parentCode';
        var data = this.list2Tree(a,b,this.listTreeData);
        debugger;
        this.transformData = data;
    },
    search:function()
    {
        var value = this.name ;
        this.$refs.treeComponent.filter(value.trim())
    },
    reset: function () {
      this.name = '';
      this.$refs.treeComponent.filter('')
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 将list 结构的数据转成tree结构
    list2Tree:function(myId,pId,list)
    {
      debugger;
      var nodes = [] ;
      // get the top level
      for(var i=0;i<list.length;i++)
      {
        var row = list[i];
        if( !this.exists(list,row[pId],myId))
        {
            row.label = row.name;
            nodes.push(row);
        }
      }
      var toDo = [] ;
      for(var j=0 ;j<nodes.length;j++)
      {
        toDo.push(nodes[j]);
      }

      while(toDo.length)
      {
          var node = toDo.shift();// the parent node   方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
          // get the children node 
          for(var k=0;k<list.length;k++)
          {
            var row1 = list[k];
            var a= row1[pId] ;
            var b = node[myId] ;
            if( a == b )
            {
                // row1.children = [];
                row1.label = row1.name;
                if(node.children)
                {
                  node.children.push(row1);
                }
                else
                {
                  node.children =[row1];
                }
                 toDo.push(row1);
            }
            
          }
      }
      return nodes ;
    },
    exists:function(list,parentId,myId)
    {
        for(var i=0;i<list.length;i++)
        {
          if(list[i][myId] === parentId)
          {
              return true;
          }
        }
        return false ;
    },
  }
}
</script>
<style scoped>
  .treePlane{
      margin-left: 20%;
  }
</style>

其中引入的js文件内容就是上面提到的 通用list数据源样例（能分辨父子关系的list）：

效果图如下：
在这里插入图片描述
声明：本着尊重他人知识产权和尊重他人劳动成果的原则，以上涉及参考他人博客内容部分，原作者博客地址已附上相应位置。
如需转载本文，请附上本文原地址，如若未附上本文地址，本文作者保留相关追究权利。

zhao.Lau
关注
专栏目录
vue项目怎样使用elementUI的树形组件 tree组件
07-20 1万+
在模板中使用el-tree标签 给data属性绑定树形结构数据即可 <el-tree :data="treeData"></el-tree> 接着在data中编写数据 treeData: [ { label: "java", children: [] }, { ...
ElementUI组件树
06-26
Element-Ui-Tree详解
element-ui树形控件（tree）
m0_51933554的博客
11-03 4230
element-ui树形控件（tree）
基于Element UI内置的Select下拉和Tree树形组件，组合封装的树状下拉选择器
最新发布
WindfallSheng的博客
07-23 2525
基于Element UI内置的Select下拉和Tree树形组件，组合封装的树状下拉选择器
ElementUI中Tree组件使用
w13966597931的博客
12-04 5080
首先，数据库表为： 查询接口返回的实体类为： 查询接口返回的数据格式：通过属性 children来判断是否有子节点。 需要注意的是： 1：树组件中 :data="deps" 加载树组建的数据。:props="defaultProps" 加载树组件的配置，其中label是给个枝叶的名字对应的字段，children是子节点对应的字段。:filter-node-method="filterNode" 树组件的搜索,filterNode过滤的回调，这个官网拷贝即可。:expand-on-click-no
ElementUI之Tree树形控件使用
牧小七的博客
06-30 2650
以下列出的属性、事件、方法，可使用Tree控件实现节点的拖拽功能（可实现修改顺序、更换父级节点功能）、点击节点勾选复选框、只点击箭头图标展开和收缩节点、父子节点不级联勾选、默认展开全部节点功能。
vue之element-ui 的tree组件
Ruipower的博客
09-01 9360
这些天在学习vue做一个树结构，使用了elementui的组件。记录一下。 1.首先，从后台返回的数据是类似于这样的 let data = { "returnCode": "000000", "returnMsg": "success", "projectInfo":[ {"pName":"p2p实验项目","pId":"1cfb5
elementUI Tree 树形控件的官方使用文档
10-17
ElementUI Tree 树形控件是前端开发中常用的一种组件，它用于展示具有层次结构的数据，通常被用来表示目录、组织架构或者有嵌套关系的信息。这个组件允许用户展开或折叠节点，以便更好地管理和查看数据。在本文中，...
vue elementUI tree树形控件获取父节点ID的实例
10-18
在使用Vue.js框架结合Element UI库构建网页时，树形控件（Tree）是一个常用的组件，它能很好地展示层级化数据。当我们需要在Element UI的Tree组件中获取被选中节点的父节点ID时，需要通过一些编程技巧来实现。本篇...
Spring：element-ui中的tree、树形结构的实现
jialuosi的博客
06-12 708
可能很多人都没写过关于tree的代码，今天我来演示一下，步骤很全，放心观看。这么一看是不是清晰明了？那么我们该返回什么样的数据是不是也清楚明白了？话不多说我们来看后端与数据库，首先是数据库：接着来看实体类：（有lombok记得装）这里dchildren正好对应的是子节点，可以无限的递归下去。也符合上面官网给出的示例。思想也很简单，如果是子节点就用dchildren.add添加进去即可。
element tree
10-27
用vue+element 制作tree 功能主要有搜索增删改上下移动
ElementUI中el-tree节点的操作的实现
12-28
其实tree的有些方法用起来是很方便的， this.$refs.tree.getCheckedKeys()；这个原生态的方法。官方文档上说的是，返回一个数组。有了这个方法，我们就可以得到选中的每个节点的id,拿到了id，那所有的问题就迎刃而解了。 废话不多说，直接上代码 html 得到节点id 添加节点 <el-button @click=che
Element-UI框架的使用（四）-- Tree树形控件
weixin_57246557的博客
08-16 2407
Tree 树形控件 Element-UI: Tree 树形控件 用清晰的层级结构展示信息，可展开或折叠。 一、 基本使用 代码结构 <!-- data 要展示的数据(Array) --> <!-- props 配置选项(Object) --> <!-- node-click 节点被点击时的回调 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、 节点对应的 Node、节点组件本身。 --> <el-tree :data="data" :props
【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree
热门推荐
Sabrina_cc的博客
12-03 1万+
本文主要讲解了基础Element-ui中el-tree组件的使用，包括对组织机构树的组件封装，使用组织机构树进行查询，以及使用vue-content-menu修改editableTree
【实战经验】ElementUI 的 Tree 组件的基本使用。
m0_48721669的博客
07-20 2860
起因 事情是这样的，项目最近有个需求。服务器有个图片空间，说白了就是个文件夹。文件夹的结构大家都知道，一层一层的。然后需要在前端以树形展示。 具体的需求如下 可以新建子目录，但是只能新建二级，三级的时候新建按钮置灰。 在页面上展示父级目录名称和当前所在路径，用 ‘/’ 分隔。 根目录固定为 图片空间 。 页面首次打开的时候，请求接口，只返回一级目录，默认展示所有一级目录。 用户点击一级目录，根据所点击的一级目录对应的 id 请求接口返回二级目录，以此类推。 我当时看到这个需求的时候，心里想，这玩意我在
elementUI-Tree 树形控件的使用
黑马Jack的博客
05-26 6325
elementUI-Tree 树形控件的使用 实现效果： 控件的官方使用说明 控件要求返回的数据结构 { "success": true, "code": 20000, "message": "成功", "data": { "items": [ { "id": "1394579386803421185", "title": "后端开发", "children": [ { "id
vue使用elementui树形组件
06-28
### 回答1： Vue可以使用ElementUI的树形组件来展示树形结构的数据。使用步骤如下： 1. 安装ElementUI组件库 可以通过npm或yarn安装ElementUI组件库，具体命令如下： ``` npm install element-ui --save ``` 或 ``` yarn add element-ui ``` 2. 引入ElementUI组件 在Vue项目的入口文件中，引入ElementUI组件库和样式文件，具体代码如下： ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 使用树形组件 在Vue组件中，使用ElementUI的el-tree组件来展示树形结构的数据，具体代码如下： ```html <template> <el-tree :data="treeData" :props="treeProps"></el-tree> </template> <script> export default { data() { return { treeData: [ { label: '一级 1', children: [ { label: '二级 1-1', children: [ { label: '三级 1-1-1' }, { label: '三级 1-1-2' } ] }, { label: '二级 1-2', children: [ { label: '三级 1-2-1' }, { label: '三级 1-2-2' } ] } ] }, { label: '一级 2', children: [ { label: '二级 2-1', children: [ { label: '三级 2-1-1' }, { label: '三级 2-1-2' } ] }, { label: '二级 2-2', children: [ { label: '三级 2-2-1' }, { label: '三级 2-2-2' } ] } ] } ], treeProps: { label: 'label', children: 'children' } } } } </script> ``` 其中，treeData是树形数据，treeProps是树形组件的配置项，用于指定树形数据中的label和children字段。 以上就是使用ElementUI树形组件的基本步骤。 ### 回答2： Vue是一种流行的JavaScript框架，用于构建用户界面。ElementUI是一个基于Vue的UI组件库，其中包含许多常见的UI组件，包括树形组件。ElementUI的树形组件使开发人员能够轻松创建树形结构的界面元素，并可以满足各种需求。 要使用ElementUI的树形组件，首先需要在Vue应用程序中安装ElementUI。有多种方法可以安装ElementUI，其中包括使用npm、CDN或下载源代码。在安装完成后，开发人员可以在需要使用树形组件的地方包含ElementUI中的<el-tree>标记。 使用ElementUI的树形组件非常灵活。开发人员可以通过简单的属性更改来自定义树形组件的行为和外观。例如，可以使用“expand-on-click-node”属性来控制树形节点是否可以通过单击展开/关闭。开发人员还可以使用“:data”属性来传递树形节点的数据。此外，ElementUI还提供了许多事件和插槽，以便更好地控制树形组件的行为。 在许多应用程序中，树形结构是重要的用户界面元素。使用ElementUI的树形组件可以使开发人员更轻松地创建和管理树形结构，并可以提高应用程序的可维护性和性能。无论是开发单页面应用程序还是多页面应用程序，使用ElementUI的树形组件都是一个不错的选择。 ### 回答3： Vue 使用 ElementUI 树形组件非常方便。ElementUI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件，其中包括了树形组件。以下是关于 Vue 使用 ElementUI 树形组件的一些注意事项和步骤： 安装 ElementUI： 在使用 ElementUI 之前，需要先安装它。在命令行中执行以下命令即可： ``` npm install element-ui --save ``` 使用 ElementUI 树形组件： 在 Vue 项目中使用 ElementUI 树形组件，需要先引入 ElementUI 和相应的组件。在 main.js 中添加如下内容： ``` import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 接下来就可以在需要使用树形组件的地方添加以下代码： ``` <template> <el-tree :data="data" :props="defaultProps"> </el-tree> </template> <script> export default { data() { return { data: [{ label: '一级 1', children: [{ label: '二级 1-1', children: [{ label: '三级 1-1-1' }] }] }, { label: '一级 2', children: [{ label: '二级 2-1', children: [{ label: '三级 2-1-1' }] }, { label: '二级 2-2', children: [{ label: '三级 2-2-1' }] }] }, { label: '一级 3', children: [{ label: '二级 3-1', children: [{ label: '三级 3-1-1' }] }, { label: '二级 3-2', children: [{ label: '三级 3-2-1' }] }] }], defaultProps: { children: 'children', label: 'label' } } } } </script> ``` 在这个例子中，我们使用了一个简单的树形结构。需要注意的是，在 data 中定义了树的结构，而在 defaultProps 中，则定义了树的属性。 以上就是 Vue 使用 ElementUI 树形组件的简单介绍。使用 ElementUI 提供的树形组件，可以更加轻松地实现树形结构的展示，并且具有良好的用户交互体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值