微信小程序 tree树形组件的实现

最新推荐文章于 2025-04-02 16:43:01 发布
最新推荐文章于 2025-04-02 16:43:01 发布
阅读量9.9k 收藏 53
点赞数 12
分类专栏： 微信小程序 文章标签： 前端 小程序 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40060547/article/details/111822217
版权

前言

最近公司的小程序来了一个需求，需要实现一个树形结构的展示。pc端的tree组件可谓百家争鸣，拿来即用的组件很多，奈何在网上检索一番，并未发现小程序端有适合的tree组件，于是便开始了尝试，自己写一个简单的tree组件。（末尾附完整代码）
先看效果
在这里插入图片描述

开始

首先项目结构如图
在这里插入图片描述
模拟一下树形结构数据
index/index.js

  data: {
    dataTree: [
      {
        id: 1,
        name: '一级A',
        children: [
          {
            id: 23,
            name: '二级A-a',
            children: [
              {
                id: 98,
                name: '三级A-a-1'
              }
            ]
          },
          {
            id: 20,
            name: '二级A-b',
          }
        ]
      },
      {
        id: 2,
        name: '一级B',
        children: [
          {
            id: 21,
            name: '二级B-a',
          }
        ]
      }
    ],

由于数据的层级是未知的，所以需要使用递归组件，即tree组件调用自身
tree/index.js

{
  "component": true,
  "usingComponents": {
    "c-tree": "/component/tree/index"
  }
}

只有当父节点被展开且存在子节点时才会展示递归组件

wx:if="{{item.children && item.children.length > 0 && item.open }}

tree/index.wxml

    <c-tree
      wx:if="{{item.children && item.children.length > 0 && item.open }}"
      dataTree='{{ item.children }}'
      selectKey="{{selectKey}}"
      isSelectLastNode="{{isSelectLastNode}}"
      isOpenAll="{{isOpenAll}}"
    >
    </c-tree>

接下来是组件向页面传递一个自定义事件select

item : 被点击的数据
isSelectLastNode： 配置参数，是否必须选择最后一个节点

tree/index.js

select(e) {
      const item = e.currentTarget.dataset.item
      if(this.properties.isSelectLastNode) {
        console.log(item)
        if (!item.children || item.children.length == 0) {
          this.triggerEvent('select', { item: item }, { bubbles: true, composed: true })
        } else {
          this.triggerEvent('select', { tips: '必须选择最后一个节点' }, { bubbles: true, composed: true })
        }
      } else {
        this.triggerEvent('select', { item: item }, { bubbles: true, composed: true })
      }
   }

注意：
为了给选中的节点加上样式，在页面引入tree组件时需要传入一个参数selectKey，其值为节点数据的id，所以在页面拿到组件回传的数据时都要更新selectKey

完整代码

tree组件
index.js

// pages/common/comTree/index.js
/**
 dataTree = [
   {
     id: 1,
     name: '一级名称',
     children: []
   }
 ]

  */
 Component({
  /**
   * 组件的属性列表
   */
  properties: {
    dataTree: {
      type: Array,
      value: []
    },
    selectKey: { // 选中的节点id
      type: String,
      value: ''
    },
    isSelectLastNode: { //是否必须选中最后一节点
      type: Boolean,
      value: false
    },
    isOpenAll: { //是否展开全部节点
      type: Boolean,
      value: false
    }
  },
  observers: {
    'dataTree': function(params) {
      params.forEach(v => {
        v.open = this.properties.isOpenAll // 是否展开
      })
      this.setData({
        tree: params
      })
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    tree: []
  },

  /**
   * 组件的方法列表
   */
  methods: {
    isOpen(e) {
      const open = 'tree[' + e.currentTarget.dataset.index + '].open'
      this.setData({
        [open]: !this.data.tree[e.currentTarget.dataset.index].open
      })
    },
    select(e) {
      const item = e.currentTarget.dataset.item
      if(this.properties.isSelectLastNode) {
        console.log(item)
        if (!item.children || item.children.length == 0) {
          this.triggerEvent('select', { item: item }, { bubbles: true, composed: true })
        } else {
          this.triggerEvent('select', { tips: '必须选择最后一个节点' }, { bubbles: true, composed: true })
        }
      } else {
        this.triggerEvent('select', { item: item }, { bubbles: true, composed: true })
      }
    }
  }
})

index.wxml

<!--pages/common/comTree/index.wxml-->
  <view wx:for="{{tree}}" wx:key="index" class="tree">
    <view class="tree-item tree-item-select">
      <view class="tree-item-onOff" wx:if="{{item.children && item.children.length > 0}}"  bindtap="isOpen" data-index="{{index}}"> 
        <image src="/assets/u1490.svg" class="{{item.open ? 'tree-item-onOff-open' : 'tree-item-onOff-closed'}}"></image>
      </view>
      <view class="tree-item-onOff" wx:else>
      </view>
      <view class="tree-item-name {{selectKey == item.id ? 'tree-item-name-select' : '' }}" bindtap="select" data-item="{{item}}" data-index="{{index}}">
        <view class="name">{{item.name}}</view>
        <view class="img">
          <!-- <image wx:if="{{selectKey == item.id }}" src="/assets/icon/u435.svg"></image> -->
        </view>
      </view>
    </view>
    <c-tree
      wx:if="{{item.children && item.children.length > 0 && item.open }}"
      dataTree='{{ item.children }}'
      selectKey="{{selectKey}}"
      isSelectLastNode="{{isSelectLastNode}}"
      isOpenAll="{{isOpenAll}}"
    >
    </c-tree>
  </view>

index.wxss

.tree {
  text-align: left;
  /* height: 45px;
  line-height: 45px; */
  padding-left: 15px;
}
.tree-item {
  height: 45px;
  line-height: 45px;
  display: flex;
  /* padding-left: 15px; */
}
.tree-item-onOff {
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tree-item-onOff  image {
  width: 9px;
  height: 5px;
  display: block;
  transition: 0.4s;
}
.tree-item-onOff-closed {
  transform: rotate(-90deg);
}
.tree-item-onOff-open {
  transform: rotate(0deg);
}
.tree-item-name {
  width: calc(100% - 40px);
  display: flex;
  padding-left: 10px;
}
.name {
  width: calc(100% - 50px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.img {
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img  image {
  width: 15px;
  height: 10px;
  display: block;
}
.tree-item-name-select {
  background: #ECF7FA;
  color: #0079FE;
}
.tree-item-name-select2 {
  color: #0079FE;
}

index.json

{
  "component": true,
  "usingComponents": {
    "c-tree": "/component/tree/index"
  }
}

index页面
index.json

{
  "usingComponents": {
    "tree": "/component/tree/index"
  }
}

index.wxml

<!--index.wxml-->
<view class="container">
  <tree
    dataTree="{{dataTree}}"
    selectKey="{{selectKey}}"
    bind:select="handleSelect"
    isSelectLastNode="true"
    isOpenAll="true"
  ></tree>
</view>

index.js


Page({
  data: {
    dataTree: [
      {
        id: 1,
        name: '一级A',
        children: [
          {
            id: 23,
            name: '二级A-a',
            children: [
              {
                id: 98,
                name: '三级A-a-1'
              }
            ]
          },
          {
            id: 20,
            name: '二级A-b',
          }
        ]
      },
      {
        id: 2,
        name: '一级B',
        children: [
          {
            id: 21,
            name: '二级B-a',
          }
        ]
      }
    ],
    selectKey: '', //选中的节点id
  },
  handleSelect(e) {
    if (e.detail.tips) {
      console.log('必须选择到最后一个节点')
    } else {
      this.setData({
        selectKey: e.detail.item.id
      })
    }
  },
  onLoad: function () {
  }
})

完整项目的gitee地址

微信小程序自定义tree组件，拿走直接用
weixin_43889687的博客
07-13 2133
工作原因，微信小程序需要一个功能类似于elemenui中的tree组件，找了好多ui组件库没有能直接用的，最后自己写了一套，封装成组件，中心技术是组件本身递归，只需要在父级页面传“树列表数据”和“选中的节点id”就可以用了。以下是tree组件需要的icon图标，自己去矢量库下载就好。
uniapp在H5和APP、微信小程序定义树形结构数据
weixin_52830464的博客
05-27 486
【代码】uniapp在H5和APP、微信小程序定义树形结构数据。
微信小程序 树形菜单组件_v2
07-20
微信小程序 树形菜单组件 v2 需属性传值 listData（树形菜单数据） listData数据格式:[{title:'A层级菜单1',children:[]},{title:'A层级菜单2',children:[]}] 使用： <wxTreeList listData="{{listData}}"></wxTreeList>
微信小程序-组件的使用
成在坚持，贵在坚持
08-05 1153
在页面上需要将数据显示为树形结构，多个页面上使用，所以将树形结构封装成一个组件，在页面上引用即可。在文件夹下新建一个component的文件夹。
在微信小程序中实现树形结构
最新发布
qq_58294345的博客
04-02 308
这里我们就完成了组件的封装，我们在后续引用组件需要修改时可以直接修改组件内部代码实现效果。（先创建一个components的文件夹装我们的组件，然后在里面创建一个名为。其中我们还需要让组件引用自己，达到递归生成的效果（直接操作。的文件夹，在文件夹里面创建Component文件）在使用时首先我们需要再页面json文件中配置。其中设置了选中事件可以获取到选中节点信息。：（关键代码如下：如果需要。这里使用了组件的思路。
微信小程序多列下拉框的实现（树形数据结构和单数组数据结构形式）
weixin_49376462的博客
04-19 3731
利用微信小程序api（bindchange和bindcolumnchange）,实现不同后端数据格式下的多列下拉框实现（三层）（树格式和一层一个数组的格式）
微信小程序原生写法实现树型选择组件，完整代码。
Jnsone的博客
08-18 2502
微信小程序原生写法实现树型选择器组件,VantUI的简单使用
微信小程序写一个树型组件
ZerZhang的博客
08-25 1376
微信小程序树形结构(组件)
微信小程序 树形菜单组件
01-30
微信小程序 树形菜单组件 存放路径：/components/treeList/treeList listData数据格式:[{title:'A层级菜单1',children:[]},{title:'A层级菜单2',children:[]}] 使用： <block wx:for="{{listData}}" wx:key="index"><treeList listData="{{item}}" step="1" ></treeList></block>
微信小程序树形组件微信小程序树形组件
06-21
微信小程序树形组件微信小程序树形组件
wx-tree-component:微信小程序目录树（关系树）组件
04-28
微信小程序关系树组件 tree组件参数： tree: Array，目录树结构，参见okrgraph.js，必填 init-member-id: Array，初始化成员id，必填 selectChange: 点击成员回调函数，回调函数参数为点击的成员信息 成员字段： level: Number，员工等级，顶级为0，递增，必填 id: String，员工id，必填 parentId: String，员工上级id，必填 members: Array，员工下级成员列表，非必填
微信小程序树形菜单替代组件:路径视图path-view
01-27
path-view-component 微信小程序 树形菜单替代组件：路径视图 path-view 项目截图 路径视图动态效果图-路径模式：mode1: 路径视图动态效果图-路径模式：mode2: 更新说明 2018-08-13 修复value以及unnormalizedValue更新时视图无法同步更新的bug。~~更详细的说明留待后续补充。。~~说明已在下方补充 2018-08-21 新增了contentKey，设置 每级内容显示内容对应的键值，之前只能是 item.title，现在可以根据需要设置。 2018-09-20 新增位置保持功能 API 参数 说明 类型 可选值 默认值 value     要显示的树状数据 Array Y [] pathMode     路径模式，支持：'mode1'、'mode2'。'mode1'模式，点击路径跳转时视图显示对应标签下一级的内容,'mode
TreeCRTL 树状控件的小程序
08-23
vc TreeCRTL 树状控件各种操作的小程序
微信小程序树形选择组件
qq_34907249的博客
10-12 3584
treeListIndex: {// 默认为0，当前循环的第几层，用于tree样式展示。* @t 功能类型 collapse：点击图标展开收起，title:点击标题事件。text:"2-三级-1"text:"二级-1",text:"二级-2",前言：微信小程序并没有提供这样的组件 ，vant也没有，就自己写了一个。// 在组件实例被从页面节点树移除时执行。text:'一级',2、父子间事件通信 （需要层层向上传递）
微信 html tree,微信小程序 tree组件
weixin_33207144的博客
06-07 498
1. 根目录下新建tree组件 /components/tree/tree.wxml.js.wxss.json(1). tree.wxml{{treeList.text}}(2). tree.js// components/tree/tree.jsComponent({/*** 组件的属性列表*/properties: {treeListIndex: {// 默认为0，当前循环的第几层，用于tre...
微信小程序自定义组件-树形数据表格（进阶版）
kitty_ELF的博客
05-12 2766
前言一、下载引用二、使用treegrid组件三、使用文档属性事件四、组件源码利用递归思想编写的表格行——treegrid-treeline树形表格——treegrid-treegrid总结 前言 之前上传过一个简单版的，说以后项目可能用，还真被我说中了，但是之前那个版本实在是太简单了根本没法用，所以最近我又花了一天的时间重新整理写了一份进阶版的树形数据表格。首先还是直接上效果图： 通过上面的效果图，可以看出我做了以下的进阶升级： 1、自定义单元格的宽度、溢出部分可自动换行； 2、自定义表头数据 可支持不.
微信 html tree,微信小程序Tree自定义控件实现
weixin_34404528的博客
06-07 650
在微信小程序中实现Tree控件之前在网上搜索了关于微信小程序tree控件的实现，但是发现居然没有人去做tree控件，因此本人下定决心凭借自己一个多月的自学能力给大家分享一下自己的小成果。第一步：创建tree自定义控件**1.创建js文件treebar.js**//获取应用实例const app = getApp()Component({/*** 组件的属性列表*/properties: {serv...
微信小程序tree组件仿el-tree效果
weixin_45168167的博客
03-09 704
【代码】微信小程序实现tree组件仿el-tree效果。
微信小程序树形菜单组件：提升用户体验的利器
gitblog_09737的博客
10-22 556
微信小程序树形菜单组件：提升用户体验的利器 【下载地址】微信小程序树形菜单组件 本仓库提供了适用于微信小程序的树形菜单组件。该组件通过简单的数据结构配置，能快速在你的小程序项目中实现多层次的导航菜单展示。适用于需要展示分类清晰、层次结构明显的信息场景，如组织架构选择、商品分类浏览等 ...
微信小程序实现tree组件展开
09-09
微信小程序实现tree组件展开可以通过以下几个步骤实现。 首先，需要在小程序的页面中定义一个树形数据结构，可以使用数组和对象的嵌套来表示树的结构。每个节点包含一个唯一标识符和一个子节点数组。 接下来，在小程序的页面中编写展示tree组件的代码。可以使用wx:for循环来遍历树的节点，并使用wx:if条件判断来判断节点是否展开。如果节点展开，则显示该节点的子节点。 然后，需要在页面的js文件中编写相应的事件处理函数，来处理tree组件展开和折叠的操作。可以通过监听节点的点击事件来动态改变节点的展开状态，通过改变节点的isExpanded属性来实现展开和折叠。同时，还可以通过setData方法来更新页面的数据，实现页面的重新渲染。 最后，可以在页面中添加相应的样式，来美化tree组件的展示效果。可以使用自定义的样式类来设置每个节点的样式，以及展开和折叠的图标等。 以上就是通过微信小程序实现tree组件展开的简要步骤。通过对树形数据结构的定义、页面代码的编写、事件处理函数的实现和样式的设置，可以实现一个可以展开和折叠的简单的tree组件。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值