微信小程序树结构选择组件（优化源码）

实现效果：

 

 

1.index.html

<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="../../image/zhankai.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="../../image/choice.svg" class="check-box"></image>
      <image wx:if="{{item.checked == 0||item.checked==-1}}" src="../../image/unchoice.svg" 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>

2.index.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    dataTree: {
      type: Array,
      value: []
    },
    checkrule: {
      type: Array,
      value: []
    },
    treeListIndex: { // 当期树形列表的索引
      type: Number,
      value: 1
    },
    isOpenAll: { // 是否展开全部节点
      type: Boolean,
      value: false
    }
  },
  observers: {
    'dataTree': function (params) {
      var arr=[]
      if(this.properties.checkrule.length>0){
        this.setData({
          allChoiceIdList:this.properties.checkrule
        })
        arr = this.showcheck(params)
      }else{
        arr=params
      }
      this.setData({
        tree: this._initSourceData(arr),
      })
    }
  },
  /**
   * 组件的初始数据
   */
  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
    },

    //回显选中的
    showcheck(nodes) {
        for (let i = 0; i < nodes.length; i++) {
          if (this.properties.checkrule.indexOf(nodes[i].id) > -1) {
            nodes[i].checked = 1
          }
          if (nodes[i].children && nodes[i].children.length > 0) this.showcheck(nodes[i].children)
        }
      return nodes
    },
  }
})

3.index.css

/* modules/attestation/pages/checkrule/index.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;
}

4.index.josn

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

5.页面引用

  <tree dataTree="{{list}}" id='trees' checkrule='{{roleIds}}' isOpenAll="{{true}}"></tree>

dataTree：树结构数据（数据结构可以源码中修改）

checkrule：回显或设置默认选中的元素