微信小程序tree组件仿el-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/img/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/img/choice.png" class="check-box"></image>
      <image wx:if="{{item.checked === 0}}" src="../../assets/img/unchoice.png" class="check-box"></image>
      <image wx:if="{{item.checked === -1}}" src="../../assets/img/unfullChoice.png" class="check-box"></image>
      <text class="tree-item-title {{item.checked === 1 ? 'tree-item-name-select' : '' }}">{{item.label}}</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>

ts

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
    },
    // 获取所有选中的节点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
    }
  }
})

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;
}

使用

 <view>
 	//tree数据 select勾选返回的节点
     <tree dataTree="{{department}}" isOpenAll="true" bind:select="handleClick"></tree>
</view>