原生小程序-树形多选treeCheckbox

父组件应用案例

  <categoryTree dataTree="{{categoryList}}" isOpenAll="true" bind:select="handleClick">		</categoryTree>
  handleClick就是获取到多选参数

Tree.wxml

<view wx:for="{{tree}}" wx:key="id" class="tree_container">
  <!-- 一级菜单 -->
  <view style="margin-left: {{treeListIndex*20}}rpx" class="tree-item">
    <view class="block_" bindtap="select" data-item="{{item}}" data-index="{{index}}">
      <view class="tree-item-name">
        <text class="tree-item-title {{item.checked === 1 ? 'tree-item-name-select' : '' }}">{{item.name}}</text>
      </view>
      <block>
        <image wx:if="{{item.checked === 1}}" src="../../static/images/choice.png" class="check-box"></image>
        <image wx:if="{{item.checked === 0}}" src="../../static/images/unchoice.png" class="check-box"></image>
        <image wx:if="{{item.checked === -1}}" src="../../static/images/unfullChoice.png" class="check-box"></image>
      </block>
    </view>
    <view class="tree-item-onOff" wx:if="{{item.children && item.children.length > 0}}" bindtap="isOpen" data-index="{{index}}">
      <van-icon name="arrow-down" class="{{item.open ? 'expand' : 'collapse'}}" />
    </view>
    <view class="tree-item-onOff" wx:else>
    </view>
  </view>
  <!-- 二级菜单 -->
  <categoryTree 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)
        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)
      console.log('currentTap节点:', currentTap)
      // 修正它的父节点
      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){
          var obj = {}
          obj.categoryId = nodes[i].id
          obj.categoryName = nodes[i].name
          res.push(obj)
        }
        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;
  position: relative;
}

.tree-item {
  width: auto;
  box-sizing: border-box;
  overflow-x: scroll;
  padding: 18rpx 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1rpx solid #cdcdcd;
}

.block_ {
  width: 100% !important;
  display: contents;
  margin-right: 60rpx;
}

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

.tree-item-title {
  margin-left: 24rpx;
  color: #1c2438;
  font-size: 32rpx;
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 400rpx;
}

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

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

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

.check-box {
  /* position: absolute;
  right: 15%; */
  height: 32rpx !important;
  width: 32rpx !important;
  margin-right: 60rpx !important;
}

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

Tree.json

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