iview填坑之Tree树型组件

最新推荐文章于 2024-08-16 11:25:57 发布

置顶

啊哟瑞迪，狗！

最新推荐文章于 2024-08-16 11:25:57 发布

阅读量6.4k

点赞数 2

分类专栏：前端 Vue 文章标签： iview vue tree 树型组件前端

本文链接：https://blog.csdn.net/qq_29181145/article/details/94446691

版权

本文主要介绍了如何处理iview Tree组件的数据，当后端提供的数据非树形结构时，需要前端进行转换。同时，针对iview官方样式的局限，文章提供了使用render函数自定义样式的方法，包括点击查询、选中效果以及自定义鼠标样式等功能，以满足实际业务需求。

摘要由CSDN通过智能技术生成

<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: 'paren