手动实现树形下拉菜单

效果图

组件使用

index.wxml

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

index.wxss

index.json

{"navigationBarTitleText": "树形下拉菜单","usingComponents": {"tree": "/components/tree/tree"}
}

index.js

Page({data: {dataTree: [{id: 11,name: '一级A一级A一级A一级A一级A一级A一级A一级A一级A一级A一级A一级A一级A一级A',children: [{id: 13,name: '二级A-a',children: [{id: 16,name: '三级A-a-1'}]},{id: 14,name: '二级A-b',}]},{id: 12,name: '一级B',children: [{id: 15,name: '二级B-a',}]},{id: 0,name: '一级C',children: [{id: 1,name: '二级C-a',children: [{id: 4,name: '三级C-a-1',children: [{id: 9,name: '四级C-a-1-1'}, {id: 10,name: '四级C-a-1-2'}]}]},{id: 2,name: '二级C-b',children: [{id: 5,name: '三级C-b-1'}, {id: 6,name: '三级C-b-2'}]},{id: 3,name: '二级C-c',children: [{id: 7,name: '三级C-c-1'}, {id: 8,name: '三级C-c-2'}]}]}]},handleClick(e) {console.log('点击事件', e.detail)}
})

tree组件

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.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;white-space: nowrap;
}.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

自己引用自己会报错（咱们项目中打包会死循环，原生中可以），可以在App.json中全局引入，这样自己使用自己就不会有问题

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

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 = 0element.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.itemitem = 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.parentlet 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 = -1if (all) parent.checked = 1if (none) parent.checked = 0// 修正整个treethis.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 = 1if (node.children && node.children.length > 0) node.children = this._allChoice(node.children)break;case 1:node.checked = 0if (node.children && node.children.length > 0) node.children = this._allCancel(node.children)break;default:node.checked = 1if (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) returnfor (let i = 0; i < nodes.length; i++) {nodes[i].checked = 1if (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) returnfor (let i = 0; i < nodes.length; i++) {nodes[i].checked = 0if (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) returnfor (let i = 0; i < tree.length; i++) {if (tree[i].id === newItem.id) {tree[i] = newItembreak} 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 };},// 获取所有选中的节点idgetAllChoiceId(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}}
})