微信小程序tree下拉复选组件（带源码）

效果

鸣谢

感谢这位大佬的思路

难点

• 如何根据层级缩进，这里是根据index
• tree组件是自调用（递归）
• 由于组件是递归渲染，导致平级非点击项数据为原始状态，利用组件通信，一层层传递状态替换掉旧状态，以此保持状态是同步的。
• checked：0未选中，1选中，-1有选中但未全选
• 组件是递归调用的，所以不要在递归中频繁的setData最好是return一个值,最后在setData
• 选中一个元素，如果它有子级，则子级也全选并展开；
• 取消一个元素，如果它有子级，则子级也全取消，不用管展不展开。

源码

微信小程序代码片段
gitee仓库

• tree.wxml

<view wx:for="{
    
    {tree}}" wx:key="id" class="tree_container">
  <!-- 一级菜单 -->
  <view style="margin-left: { 
       { 
       treeListIndex*40}}rpx" class="tree-item">
    <view class="tree-item-onOff" wx:if="{
    
    {item.children && item.children.length > 0}}" bindtap="isOpen" data-index="{
    
    {index}}">
      <image src="../../assets/images/u1490.svg" class="{
    
    {item.open ? 'expand' : 'collapse'}}" />
    </view>
    <view class="tree-item-onOff" wx:else>
    </view>
    <view class="tree-item-name" bindtap="select" data-item="{
    
    {item}}" data-index="{
    
    {index}}">
      <image wx:if="{
    
    {item.checked === 1}}" src="../../assets/images/choice.png" class="check-box"></image>
      <image wx:if="{
    
    {item.checked === 0}}" src="../../assets/images/unchoice.png" class="check-box"></image>
      <image wx:if="{
    
    {item.checked === -1}}" src="../../assets/images/unfullChoice.png" class="check-box"></image>
      <text class="tree-item-title {
    
    {item.checked === 1 ? 'tree-item-name-select' : '' }}">{
  
  {item.name}}</text>
    </view>
  </view>
  <!-- 二级菜单 -->
  <tree wx:if=<