微信小程序树形选择组件

前言：微信小程序并没有提供这样的组件 ，vant也没有，就自己写了一个

技术点：

1、组件自身递归

2、父子间事件通信 （需要层层向上传递）

子组件：

wxml文件
<view class="tree-box">
    <view style="padding-left: 30rpx">
        <view class="item" wx:for="{
  
  {treeList}}" wx:key="*this">
            <view>
                <van-icon custom-style="{
  
  {item.collapse?'transform:rotate(90deg)':'transform:rotate(0deg)'}}" name="play" wx:if="{
  
  {item.children}}" bind:tap="showChildren" data-id="{
  
  {item.id}}"/>
                <text class="{
  
  {item.selected?'current':''}}" data-id="{
  
  {item.id}}" bind:tap="handleClick">{
  
  {item.text}}</text>
            </view>
            <block wx:if="{
  
  {item.children&&item.collapse}}">
                <tree class="tree" treeList="{
  
  {item.children}}" bind:handleClick="treeClick"></tree>
            </block>
        </view>
    </view>
</view>

js文件

//树形单选组件
Component({
    properties:{
        treeListIndex: {// 默认为0，当前循环的第几层，用于tree样式展示
            type: Number,
            value: 0
        },
        treeList: Array,
    },
    data:{
        key:Math.random(),
        treeArr:[
            {
                id:1,
                text:'一级',
                collapse:true,
                selected:false,
                children:[
                    {
                        id:"1-1",
                        text:"二级-1",
                    },
                    {
                        id:"1-2",
                        text:"二级-2",
                        children:[
                            {
                                id:"1-2-1",
                                text:"2-三级-1"
                            }
                        ]
                    },
                ]
            }
        ],
        isExec:false,
        currentIndex:"",
        currentItem:""
    },
    observers:{},
    methods:{
        showChildren(e){
            let id = e.currentTarget.dataset.id
            this.setData({
                isExec:!this.data.isExec
            })
            this.findCurrentItem(id,this.data.treeList,'collapse')
            this.setData({
                treeList:this.data.treeList
            })
        },
        /**
         * @t 功能类型 collapse：点击图标展开收起，title:点击标题事件
         * */
        findCurrentItem(id,list,t=''){
            let item =""
            list.forEach(it=>{
                if(it.id==id){
                    if(t=='collapse'){
                        it.collapse = !it.collapse
                    }
                    if(t=="title"){
                        it.selected = !it.selected
                    }
                    item = it
                }else{
                    if(t=="title"){
                        it.selected =false
                    }
                    if(it.children){
                        this.findCurrentItem(id,it.children,t)
                    }
                }
            })
            return item
        },
        handleClick(e){
            let id = e.currentTarget.dataset.id
            let arrs = [...this.data.treeList]
            let item =this.findCurrentItem(id,arrs,"title")
            this.setData({
                currentIndex:id,
                treeList:arrs,
                currentItem:item
            })
            wx.setStorageSync("tree-item",item)
            this.triggerEvent("handleClick",{item})
        },
        //递归接收
        treeClick(e){
            let {item} = e.detail
            this.triggerEvent("handleClick",{item})
        }

    },
    created(){

    },

    lifetimes:{
        attached: function() {
            this.data.treeArr = JSON.parse(JSON.stringify(this.data.treeList))
        },
        detached: function() {
            // 在组件实例被从页面节点树移除时执行
        },
    }


})

json文件

父组件：

 json文件：