微信小程序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="{{item.children && item.children.length > 0 && item.open }}" data-parent="{{item}}" dataTree='{{ item.children }}' isOpenAll="{{isOpenAll}}" treeListIndex="{{treeListIndex+1}}" catch:select="handleSelect" />
</view>

• tree.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    dataTree: {
      type: Array,
      value: []
    },
    treeListIndex: { // 当期树形列表的索引
      type: Number,
      value: 1
    },
    isOpenAll: { // 是否展开全部节点
      type: Boolean,
      value: false
    }
  },
  observers: {
    'dataTree': function (params) {
      this.setData({
        tree: this._initSourceData(params)
      })
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    tree: [],
    allChoiceIdList: [] // 所有选中的id数组
  },
  /**
   * 组件的方法列表
   */
  methods: {
    isOpen(e) {
      const open = 'tree[' + e.currentTarget.dataset.index + '].open'
      this.setData({
        [open]: !this.data.tree[e.currentTarget.dataset.index].open
      })
    },
    _initSourceData(nodes) {
      nodes.forEach(element => {
        if (element.checked === undefined) element.checked = 0
        element.open = this.properties.isOpenAll // 是否展开
        if (element.children && element.children.length > 0) element.children = this._initSourceData(element.children)
      })
      return nodes
    },
    // 选择
    select(e) {
      let item = e.currentTarget.dataset.item
      item = this._handleClickItem(item)
      // console.log('当前节点:', item)
      this.data.tree = this._updateTree(this.data.tree, item)
      this.setData({
        tree: this.data.tree
      })
      this.data.allChoiceIdList = this.getAllChoiceId(this.data.tree)
      this.triggerEvent('select', { item: item, idList: this.data.allChoiceIdList }, { bubbles: true, composed: true })
      this.triggerEvent('clickItem', { item: item }, { bubbles: true, composed: true })
    },
    // 选择冒泡事件
    handleSelect(e) {
      let parent = e.currentTarget.dataset.parent
      let currentTap = e.detail.item
      // console.log('parent节点:', parent)
      // 修正它的父节点
      parent.children = this._updateTree(parent.children, currentTap)
      const { half, all, none } = this.getChildState(parent.children)
      // console.log(`half:${half},all:${all},none:${none}`)
      if (half) parent.checked = -1
      if (all) parent.checked = 1
      if (none) parent.checked = 0
      // 修正整个tree
      this.data.tree = this._updateTree(this.data.tree, parent)
      this.setData({
        tree: this.data.tree
      })
      this.data.allChoiceIdList = this.getAllChoiceId(this.data.tree)
      this.triggerEvent('select', { item: parent, idList: this.data.allChoiceIdList }, { bubbles: true, composed: true })
    },
    /**
     * @method 处理点击选择
     * @param {Object} node 节点对象
     * @returns {Object} node 处理完毕的节点
     * @description 有子节点则全选中或全取消，当前为最底层单节点则选中或单取消
     */
    _handleClickItem(node) {
      switch (node.checked) {
        case 0:
          node.checked = 1
          if (node.children && node.children.length > 0) node.children = this._allChoice(node.children)
          break;
        case 1:
          node.checked = 0
          if (node.children && node.children.length > 0) node.children = this._allCancel(node.children)
          break;
        default:
          node.checked = 1
          if (node.children && node.children.length > 0) node.children = this._allChoice(node.children)
          break;
      }
      return node
    },
    /**
     * @method 全选
     * @param {Array} nodes 节点数组
     * @returns {Array} nodes 处理完毕的节点数组
    */
    _allChoice(nodes) {
      if (nodes.length <= 0) return
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].checked = 1
        if (nodes[i].children && nodes[i].children.length > 0) nodes[i].children = this._allChoice(nodes[i].children)
      }
      return nodes
    },
    /**
     * @method 全取消
     * @param {Array} nodes 节点数组
     * @returns {Array} nodes 处理完毕的节点数组
    */
    _allCancel(nodes) {
      if (nodes.length <= 0) return
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].checked = 0
        if (nodes[i].children && nodes[i].children.length > 0) nodes[i].children = this._allCancel(nodes[i].children)
      }
      return nodes
    },
    /**
     * @method 更新tree
     * @param {Array} tree 节点树
     * @param {Object} newItem 需要替换新节点
     * @description 找到tree中目标进行替换
     */
    _updateTree(tree, newItem) {
      if (!tree || tree.length <= 0) return
      for (let i = 0; i < tree.length; i++) {
        if (tree[i].id === newItem.id) {
          tree[i] = newItem
          break
        } else {
          if (tree[i].children && tree[i].children.length > 0) {
            tree[i].children = this._updateTree(tree[i].children, newItem)
          }
        }
      }
      return tree
    },
    /**
     * @method 获取子节点的状态
     * @param {Array} node 节点数组
     */
    getChildState(node) {
      let all = true;
      let none = true;
      for (let i = 0, j = node.length; i < j; i++) {
        const n = node[i];
        if (n.checked === 1 || n.checked === -1) {
          none = none && false;
        }
        if (n.checked === 0 || n.checked === -1) {
          all = all && false
        }
      }
      return { all, none, half: !all && !none };
    },
    // 获取所有选中的节点id
    getAllChoiceId(nodes, res = []) {
      for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].checked === 1) res.push(nodes[i].id)
        if (nodes[i].children && nodes[i].children.length > 0) this.getAllChoiceId(nodes[i].children, res)
      }
      return res
    }
  }
})

• tree.wxss

.tree_container {
  width: auto;
  box-sizing: border-box;
  overflow: scroll;
  background: #fff;
}

.tree-item {
  width: auto;
  box-sizing: border-box;
  overflow-x: scroll;
  padding: 10rpx 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.tree-item-name {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 8;
}

.tree-item-title {
  margin-left: 24rpx;
  color: #1c2438;
  font-size: 32rpx;
  word-break: break-all;
}

.tree-item-onOff {
  width: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.collapse {
  width: 36rpx;
  height: 20rpx;
  transform: rotate(-90deg);
}

.expand {
  width: 36rpx;
  height: 20rpx;
}

.check-box {
  height: 32rpx;
  width: 32rpx;
  margin-left: 30rpx;
}

.tree-item-name-select {
  color: #0079FE;
}

• tree.json

{
  "component": true,
  "usingComponents": {
    "tree": "/components/tree/tree"
  }
}

• 页面引用

<view>
 <tree dataTree="{{dataTree}}" isOpenAll="true" bind:select="handleClick"></tree>
</view>

资源

还有一个arrow图标是svg格式不支持上传，自己换吧