使用递归组件,实现下面单选组织树组件(带搜素功能):
第一、在components文件下,创建tree-node文件 tree-node.wxml 文件代码如下:
tree-node.json文件代码如下:
{ "component": true, "usingComponents": { "tree-node":"../tree-node/tree-node" } }
tree-node.js 文件代码如下:
Component({
// 组件的属性列表(父级传过来的值)
properties: {
treeList: {
type: Array,
value: []
}
},
//组件的初始数据
data: {
treeList: []
},
ready() {
//初始化 下拉菜单赋值
this.setData({
treeList: this.data.treeList
})
}, /**
- 组件的方法列表 */ methods: {
boxTap(e) {
//第一级按钮选中事件
let pid = e.target.dataset.pid;
//向父组件传值
this.triggerEvent('treeRadioTap',pid)
},
getMask(e){
//递归组件选中事件
let pid = e.detail;
this.triggerEvent('treeRadioTap',pid)
},
} })
第二、父组件中使用
1、 .json文件中引入:
"tree-node":"../../components/tree-node/tree-node"
2、.wxml中使用 3、.js文件
treeList:[] // 下拉数据
treeRadioTap(e) {
//tree视图 分类选中事件
let id = e.detail; //子组件传过来的值
}