这是结合网上示例准备编写一带复选框的树形菜单，可以多选，动态加载下一级数据，
子组件wxml文件：
<view class="container">
<view style="padding:5rpx 0;">
<image wx:if='{{ isBranch }}' bindtap='toggle' src="{{ open ? '/images/tree_show_less.png' : '/images/tree_show_more.png'}}" class='item-sImg'
data-itemid='{{ model.id }}'></image>
<image wx:else src='/images/tree_turning_right.png' class='item-sImg'></image>
<checkbox value="{{model.id}}" checked="{{model.checked}}"
class='checkbox checkbox-scale'/>
<text bindtap='tapItem' data-itemid='{{ model.id }}' data-value='{{ model.text }}'>{{ model.text }}</text>
</view>
<view style='padding-left: 25rpx;' wx:if='{{ isBranch }}' hidden='{{ !open }}'>
<mytree wx:for='{{ model.nodes }}' wx:key='id' model='{{ item }}'></mytree>
</view>
</view>
子组件js文件：
Component({
properties: {
model: Object,
},
data: {
open: true,
isBranch: false,
},
methods: {
toggle: function(e) {
if (this.data.isBranch) {
this.setData({
open: !this.data.open,
})
//add test code by xdl 2020-10-9
var itemid = e.currentTarget.dataset.itemid;
console.log("mytree goggle itemid:"+itemid)
//根据itemid读取数据，改变model，重新渲染
this.triggerEvent('toggle', { itemid: itemid }, { bubbles: true, composed: true });
//add by xdl 2020-10-9 end
}
},
tapItem: function(e) {
var itemid = e.currentTarget.dataset.itemid;
var value = e.currentTarget.dataset.value;
this.triggerEvent('tapitem', { value: value,itemid: itemid }, { bubbles: true, composed: true });
}
},
ready: function(e) {
this.setData({
isBranch: Boolean(this.data.model.nodes && this.data.model.nodes.length),
});
}
})
父组件wxml文件：
<view class='com-selectBox'>
<view class='com-sContent' bindtap='selectToggle'>
<view class='com-sTxt'>{{nowText}}</view>
<image src='/images/tree_show_more.png' class='com-sImg'></image>
</view>
<view class='com-sList' wx:if="{{selectShow}}">
<view wx:if='{{ isBranch }}' hidden='{{ !open }}'>
<checkbox-group bindchange="checkboxChange">
<mytree wx:for='{{ model.nodes }}' wx:key='id' model='{{ item }}' bind:tapitem='tapItem' ></mytree>
</checkbox-group>
</view>
</view>
</view>
父组件js文件：
// Componet/Componet.js
Component({
/**
* 组件的属性列表
*/
properties: {
model: Object
},
/**
* 组件的初始数据
*/
data: {
selectShow:false,
nowText : "请选择",
open: true,
isBranch: false,
},
/**
* 组件的方法列表
*/
methods: {
selectToggle:function(){
var nowShow=this.data.selectShow;
this.setData({
selectShow: !nowShow
})
},
checkboxChange: function (e) {
console.log("treeSelect checkboxChange:"+e.detail.value)
this.triggerEvent('checkboxChange', { selectedIds: e.detail.value }, { bubbles: true, composed: true });
},
tapItem: function(e) {
var itemid = e.detail.itemid;
var value = e.detail.value;
this.triggerEvent('tapitem', { value: value,itemid: itemid }, { bubbles: true, composed: true });
this.setData({
selectShow: false,
nowText:value
})
}
},
ready: function(e) {
this.setData({
isBranch: Boolean(this.data.model.nodes && this.data.model.nodes.length)
});
}
})
编译没问题，但无论怎样操作checkbox,都不能触发checkbox-group之bindchange事件，请各位老师指点迷津
