微信小程序实现简单的树形选择控件------treeSelect

最新推荐文章于 2025-04-02 16:43:01 发布

止语_WJ

最新推荐文章于 2025-04-02 16:43:01 发布

阅读量1w

点赞数 9

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_48365272/article/details/111691870

版权

本文介绍如何在微信小程序中自定义实现一个树形选择控件treeSelect，详细讲解了组件的创建过程，包括WXML、JSON和JS部分的代码实现。文章提到了全选和零选中状态的逻辑，并展示了组件使用示例，同时指出后续将优化中间状态功能。

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

前段时间公司突然要写小程序，项目中有一个树形控件。我找了很久的插件和框架。没有发现小程序能用的。只能硬着头皮自己写。

老规矩，先贴图
在这里插入图片描述

为什么要特意强调此图标呢？

因为该图标为中间状态。此处是我后期要优化的地方，在下面的代码中还未实现。我有了初步的思考。
我的代码中设定（以网络部为例）

0 该部门成员全部未选中

1 该部门成员全部选中

-1 该部门成员至少选中一人切少于部门总人员数

好了，下面我们来实现树形结构的全选和零选中状态

首先是树形组件的代码
components文件夹下创建tree-select文件夹，选择新建component。命名为index

index.wxml文件

<view id="treeItem">
  <block wx:for="{
   {treeList}}" wx:key="deptId">
    <view  class="tree-item" style="margin-left: {
   {depth*40}}rpx" data-id="{
   {item.deptId}}" data-is-check="{
   {item.isCheck}}" catchtap="handleClick" >
      <!-- 全选 -->
      <view class="iconfont iconxuanzhong" wx:if="{
   {item.isCheck == 1}}" style="color: #007AFF" ></view>
      <!-- 未选中 -->
      <view class="iconfont iconweixuanzhong1" wx:if="{
   {item.isCheck == 0}}" style="color:#000" ></view>
    </view>
    <!-- children -->
    <view wx:if="{
   {item.children}}">
      <tree-select treeList="{
   {item.children}}" treeArray="{
   {treeArray}}" depth="{
   {depth+1}}" catchhandleClick="treeClick" id="treeItem"></tree-select>
    </view>
  </block>
</view>

树形组件主要用的就是递归。所以上面组件中我在组件中又调用组件自身。通过depth来判断层级关系，来实现数据的缩进。treeList为页面中传进来的人员数据，treeArrary为我清洗数据之后传过来的初始的人员选中状态的数组

index.json*

{
   
  "component": true,
  "usingComponenuts": {
   
    "tree-select": "/components/tree-select/index"
  }
}

此处要在usingComponenuts中引入组件自身

index.js

  /**
   * 组件的属性列表
   */
  properties: {
   
    treeList: {
   
      type: Array,
      value: []
    },
    depth: {
   
      type: Number,
      value: 0
    }

最低0.47元/天解锁文章