Preface: The WeChat applet does not provide such a component, nor does vant, so I wrote one myself
Technical points:
1. The component itself is recursive
2. Event communication between parent and child (needs to be passed up layer by layer)
Subassembly:
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 file
//Tree-shaped radio component
Component({
properties:{
treeListIndex: {//The default is 0, which layer of the current loop is used for tree-style display
type: Number,
value: 0
},
treeList: Array,
},
data :{
key:Math.random(),
treeArr:[
{
id:1,
text:'Level 1',
collapse:true,
selected:false,
children:[
{
id:"1-1",
text:"Level 2 -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 function type collapse: Click the icon to expand and collapse, title: click on the title event
* */
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})
},
//recursively receive
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( ) {
// Executed when the component instance is removed from the page node tree
},
}
})
json file
parent component:
json file:
