iview填坑之Tree树型组件

最新推荐文章于 2025-06-10 19:00:01 发布
置顶 最新推荐文章于 2025-06-10 19:00:01 发布
阅读量6.4k 收藏 20
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 前端 Vue 文章标签： iview vue tree 树型组件 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_29181145/article/details/94446691
本文主要介绍了如何处理iview Tree组件的数据，当后端提供的数据非树形结构时，需要前端进行转换。同时，针对iview官方样式的局限，文章提供了使用render函数自定义样式的方法，包括点击查询、选中效果以及自定义鼠标样式等功能，以满足实际业务需求。

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

<Tree ref="tree" :data="treeContents" :render="renderContent"></Tree>

1. 先来说说数据

iview的Tree组件的data数据是树结构的，例如下面代码所示：

 export default {
        data () {
            return {
                treeContents: [
                    {
                        title: '一级目录',
                        expand: true,
                        children: [
                            {
                                title: '二级目录1',
                                expand: true,
                                children: [
                                    {
                                        title: '三级目录1'
                                    },
                                    {
                                        title: '三级目录2'
                                    }
                                ]
                            },
                            {
                                title: '二级目录2',
                                expand: true,
                                children: [
                                    {
                                        title: '三级目录1'
                                    },
                                    {
                                        title: '三级目录2'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        }

但是，如果后端提供的数据，不是上面的树型结构数据时，就需要前端对后端提供的数据进行“树型处理”。用到数据结构中树的遍历相关知识。this.convertTree(data.root, this.map);对后端提供的数据进行“树型处理”。比如要构造处下面这种数据形式的tree目录：

 export default {
        data () {
            return {
                treeContents: [
                    {
                        id: 'id',
                        parentId: 'parentId',
                        code: 'code',
                        name: '一级目录',
                        expand: true,
                        children: [
                            {
                                id: 'id',
                                parentId: 'parentId',
                                code: 'code',
                                name: '二级目录1',
                                expand: true,
                                children: [
                                    {
                                        id: 'id',
                                        parentId: 'parentId',
                                        code: 'code',
                                        name: '三级目录1',
                                        expand: true,
                                        children: []
                                    },
                                    {
                                        id: 'id',
                                        parentId: 'parentId',
                                        code: 'code',
                                        name: '三级目录2',
                                        expand: true,
                                        children: []
                                    }
                                ]
                            },
                            {
                                id: 'id',
                                parentId: 'parentId',
                                code: 'code',
                                name: '二级目录2',
                                expand: true,
                                children: [
                                    {
                                        id: 'id',
                                        parentId: 'parentId',
                                        code: 'code',
                                        name: '三级目录1',
                                        expand: true,
                                        children: []
                                    },
                                    {
                                        id: 'id',
                                        parentId: 'parentId',
                                        code: 'code',
                                        name: '三级目录2',
                                        expand: true,
                                        children: []
                                    }
                                ]
                            },
                        ]
                    }
                ]
            }
        }

构造代码如下： 

export default {
    data() {
      return {
        treeContents: [],
        map: {
          id: 'id',
          parentId: 'parentId',
          code: 'code',
          name: 'name',
          children: 'subSort'
        },
        expand: true,
      }
    },
    methods: {
      ...mapActions('serviceSort', ['getTreeContents']),
      // 获取树形目录
      doTreeContents() {
        this.getTreeContents({username: this.user.username}).then((data) => {
          if (data.success) {
            this.treeContents = this.convertTree(data.root, this.map);
          } else {
            this.treeContents = []
          }
        }).catch((error) => {
          console.log('error', error);
        });
      },
      // 树形数据转换
      convertTree(tree, map) {
        const result = [];
        if (tree) {
          tree.forEach((item) => {
            const id = item[map.id];
            const parentId = item[map.parentId];
            const code = item[map.code];
            const name = item[map.name];
            let children = item[map.children];
            const expand = this.expand;
            if (children) {
              children = this.convertTree(children, map)
            }
            result.push({id, parentId, code, name, children, expand})
          });
        } else {
          return []
        }
        return result
      },
    },
    mounted() {
      this.doTreeContents();
    }
  }

如果你希望一级目录是自己手动构造(静态)，而是不是后端提供的，你可以这样：

      treeContents() {
        let result = [{
          nameame: '我管理的目录',
          expand: true,
          children: []
        }];
        if (!_.isEmpty(this.contentsData)) {
          this.contentsData.forEach((item) => {
            const id = item.id;
            const name = item.name;
            const code= item.code;
            result[0].children.push({id, name, code});
          });
        } else {
          return result = []
        }
        return result
      }

2. 再来说说样式

通常，iview官网提供的样式不适用于具体业务需求，这时就需要用render函数自定义，官网也提供了一个render自定义的例子，但是样式单一，比如没用图标，点击不了数据等等。下面这个例子就简单的解决了这些，点击目录查询，点击时有选中效果，如果您想默认选中第一个二级目录，请浏览最后一个例子：

      // 点击目录查询
      renderContent(h, {root, node, data}) {
        return h('Tooltip', {
          props: {
            content: data.name,
            maxWidth: '20px',
            delay: 500
          },
        }, [
          h('span', [
            h('Icon', {
              props: {
                type: 'md-compass',
                color: node.node.selected ? '#ff9900' : 'inherit'
              },
              style: {
                marginRight: '4px',
              },
            }),
            h('span', {
              style: {
                color: node.node.selected ? '#2d8cf0' : '#1a2846',
                fontWeight: node.node.selected ? 'bold' : 'normal',
              },
              on: {
                click: () => {
                  if (!node.node.selected) {
                    this.$refs.tree.handleSelect(node.nodeKey);
                    this.searchText(data.name);
                  }
                },
              }
            }, data.name)]),
        ]);
      },

如果一级目录是我们自己静态手动写的，不需要点击，鼠标放上面不是‘手型’，你可以这样：下面的例子当鼠标悬停在一级目录是，鼠标不是‘手型’，而是“文本型”：cursor: node.nodeKey !== 0 ? 'pointer' : 'text',。此外还实现初始时选中第一个二级目录的效果。

      // 点击目录查询
      renderContent(h, {root, node, data}) {
        //这条if代码块设置flag，只执行一次，实现初始时选中第一个二级目录
        if (node.nodeKey === 1 && this.flag) {
          this.flag = false;
          this.$refs.tree.handleSelect(node.nodeKey);
          this.searchText(data.name)
        }
        return h('Tooltip', {
          props: {
            content: data.name,
            maxWidth: '20px',
            delay: 500
          },
        }, [
          h('span', [
            h('Icon', {
              props: {
                type: 'md-compass',
                color: node.node.selected ? '#ff9900' : 'inherit'
              },
              style: {
                marginRight: '4px',
              },
            }),
            h('span', {
              style: {
                cursor: node.nodeKey !== 0 ? 'pointer' : 'text',
                color: node.node.selected ? '#2d8cf0' : '#1a2846',
                fontWeight: node.node.selected ? 'bold' : 'normal',
              },
              on: {
                click: () => {
                  if (!node.node.selected && node.nodeKey !== 0) {
                    this.$refs.tree.handleSelect(node.nodeKey);
                    this.searchText(data.name)
                  }
                },
              }
            }, data.name)]),
        ]);
      },

 

【组件推荐&改造】基于element-ui 实现的iview风格tree组件
lvdou1120101985的博客
10-01 842
由于iview的tree组件API比较少，加上项目的需要iview的tree组件并不能完全的实现我想要的效果，于是就在网上找了一圈，发现了某位大佬改造的tree组件（https://www.npmjs.com/package/chu-tree-iview）。 这个组件将element ui的tree组件改造成iview风格的，当时使用的时候是基于element ui...
iview 实现 tree
qq_34103387的博客
11-05 576
文档地址: http://v1.iviewui.com/components/tree 2.代码实现 show-checkbox:允许展示选择框 <Tree ref="tree" :data="permissions" show-checkbox></Tree> 实现: async getResource () { let res = JSON.parse(JSON.stringify(this.allResource)) ..
iview 树形加工类
10-16
iview 树形加工类,后台查询list数据，前台加工成iview所需要的树形结构
iview自定义Tree组件内容
第二庄
11-20 2万+
介绍 使用iview框架进行开发的话，一般都有展示树形结构数据的需求。那么就用的到其中的Tree组件了。但是其基本架构是满足不了我们的需求的，基本架构如下： 一般来说一条数据肯定不止展示它的title属性，我们的需求是展示多个属性，并且含有多个操作按钮，具体如下： 这其中得用到 Render 函数来自定义节点显示内容和交互。 下面就介绍一下Tree组件如何自定义节点内容。 自定义节点内容 先把...
iview组件库：自定义方法去控制Tree树形数据的根节点与叶节点的关联性
qq_24428851的博客
06-10 570
今天会议上针对权限提出了新的意见，权限需要控制到按钮级别，意味着不同的用户可能拥有相同的页面的查看权限，但是有的用户能使用里面的按钮权限，比如：新增项目，编辑产品....等按钮功能，但是有的用户不能去使用里面的按钮权限功能。1、选中当前按钮权限层级的节点或者取消勾选当前页码下的所有的按钮权限层级的节点，它的父节点的勾选状态应该不发生改变。3、控制页面查看权限的父节点如果也取消了勾选，那么页面的查看权限以及下面所有的按钮查看权限也应该全部取消。4、如果页面没有查看权限，不能去给用户分配按钮的查看权限。
通过iview组件库渲染树形结构tree
热门推荐
weixin_55894946的博客
11-24 3万+
来完成，但是需求有可能要实现的功能不一样，我本次开发的需求不仅是渲染出树形的组织结构，还要有相应的。引用这三步之后，只需要把里面的功能做出改动以及下拉菜单的点击事件做出改动即可。在很多后台管理项目中，我们都会遇到要开发与。相关的需求，此时我们基本都要用到。
iview中tree树形组件使用介绍(个人总结)
机敏的皮皮虾的博客
10-22 6275
iview中tree树形组件使用介绍 最近有用到tree,被官网简单的描述折磨得有点小难受，后小有所得，在此和大家分享，希望大佬们不吝指教。 先贴官方的代码,，简单看一下 <template> <Tree :data="data5" :render="renderContent" class="demo-tree-render"></Tree> </template> <script> export default { data() {
java返回iview的树结构,构造iview Tree结构
weixin_39884323的博客
03-16 152
工程目录和类结构： 1.Book.java 测试model，包含id和父id还有name。package com.dlmu.sei;/**** @author zhangtuo* @Date 2017/4/14*/public class Book {private String id;private String parentId;private String name;public Stri...
基于vue和优秀的iView组件库的树型表格treetabletreegrid
08-10
在本文中，我们将深入探讨如何使用Vue.js框架与iView组件库来实现一个功能丰富的树型表格（TreeTable或TreeGrid）。Vue.js是一款轻量级的前端JavaScript框架，以其易用性和灵活性受到开发者喜爱。而iView是一个为Vue...
iview树型组件在HTML页面中的应用与自定义
- **iview树型组件特点**：iview的树型组件支持多选、懒加载、自定义节点等多种功能，能够满足复杂的应用需求。 #### 使用HTML页面中引入Vue构建树 - **Vue.js框架简介**：Vue.js是一个构建用户界面的渐进式...
基于iview的树型结构，使用html页面中引入vue构建树
05-12
Tree树形组件是 iview 中相对复杂的一个组件。 自定义节点内容 使用强大的 Render 函数可以自定义节点显示内容和交互,比如添加...这个demo是几个较为简单的示例，主要记录一下普通的html怎么结合iview的树型组件。。
iview table 一列按树型展示
最新发布
07-03
在 iView（现更名为 View UI）的 Table 组件中，如果你希望某一列以树形结构（Tree）展示，通常的做法是结合递归组件来实现。iView 本身并没有直接提供 Tree-Table 的功能，但可以通过自定义渲染和递归的方式来实现...
vue树形权限菜单_详解Vue.js iview实现树形权限表（可扩展表）
weixin_39998273的博客
12-21 767
问题：需要一个可折叠的权限管理系统，用表格展示。主要用的iView组件库，有Table(表格)，Tree(树形控件)，Collapse(折叠面板)看起来比较符合意思深入查看Table相关范例，发现有个通过给columns数据设置一项，指定type: 'expand'，即可开启扩展功能 可以考虑但也只是展开详细内容，如需树形结构，则需要render自定义去渲染，挺麻烦的。再去看看eleme...
iView组件库之下拉框dropdown(树形结构)
weixin_34390105的博客
03-29 6462
Iview组件下拉框树形组件 iview官方示例 实现的效果 dropdown有个属性 transfer 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false 赋值给它 false，这样不会因为失去焦点，而有部分内容会"消失" 我们观察iview给出的示例 &...
iview 做tree树结构3级结构，绑定模拟接口数据
IT博客技术分享
12-11 1277
iview 做（Tree）树结构3级结构，模拟接口数据 先上效果图： 后台接口数据返回是这个格式： data2:[ { "line": { "lineId": "02", "lineName": "2号线", "lineSname": null, "lineEname": null, "stationSName": null, "stationEName": null, "st...
构造iview Tree结构
chouya8141的博客
04-14 455
工程目录和类结构： 1.Book.java 测试model，包含id和父id还有name。 package com.dlmu.sei; /** * * @author zhangtuo * @Date 2017/4/14 */ public class Book { ...
点击按钮动态控制iview树形控件展开收起
m0_61896181的博客
03-16 1374
组件： <template> <div id="app"> <Button type="warning" @click="changes(data1, isOpen)">{{ isOpen ? "点击展开" : "点击关闭" }}</Button> <Tree :data="data1" @on-select-change="selectChange"></Tree> </div..
iview tree 实现单选功能、 iview tree 单选功能实现、iview tree 多选变单选、iview Tree树形控件、 iview tree趟坑指北！
H舞
08-27 6612
仅以此文 纪念我无声的三周年司龄 以及2019年8月 姿美堂709的封闭开发时光！！！ 每年的八月份都是我司封闭开发的 大（ku）好（bi）时光，今年封闭开发带着我的小团队用iview-admin2重新构建了app后台管理系统 期间产品需求有树形控件 - 单选 需求，旧后台用的zTree 自带此功能 无需多说，换成iview居然没有单选，只有多选 百度之~ 恩 要是一下就查到解决方案...
iView使用tree和回显
qq_34631220的博客
05-07 1877
<Tree :data="data" ref="tree" show-checkbox multiple></Tree> getCheckedNodes 获取被勾选的节点 getSelectedNodes 获取被选中的节点 getCheckedAndIndeterminateNodes 获取选中及半选节点 console.log(this.$refs.tree.getCheckedAndIndeterminateNodes()) ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值