.. | ||
css | ||
README.md | ||
zwx-dropDown.vue |
递归组件
适用于组织架构的基础展示
入口文件(main.js)引用组件注意组件的路径
import dropDown from '@/uni_modules/zwx-dropDown/components/zwx-dropDown/zwx-dropDown'
Vue.component("dropDown",dropDown)
调用(textArr为用到的数据)
<dropDown :node="textArr" @nodechange="nodechange" @filechange="filechange"></dropDown>
树结构格式例子
[{
"name": "一级架构",
"id": "1",
"open": false,
"children": [{
"name": "二级架构",
"id": "1-1",
"open": false,
"file": [{
"name": "1.txt",
"fileid":"41245654"
},
{
"name": "2.txt",
"fileid":"78545562"
}],
"children": [{
"name": "三级架构",
"id": "1-1-1",
"open": false,
"children": [],
"file": [{
"name": "3.txt",
"fileid":"8565788"
}]
}]
},
{
"name": "二级架构",
"id": "1-2",
"open": false,
"children": [{
"name": "三级架构",
"id": "1-2-1",
"open": false,
"children": [],
"file": [{
"name": "xxx.txt",
"fileid":"13454574"
}]
}]
}
]
},
{
"name": "一级架构",
"id": "2",
"open": false,
"children": [{
"name": "二级架构",
"id": "2-1",
"open": false,
"children": []
}]
},
{
"name": "一级架构",
"id": "3",
"open": false,
"children": []
},
{
"name": "一级架构",
"id": "4",
"open": false,
"children": []
}
]
事件说明
事件名 | 说明 | 回调 |
---|---|---|
nodechange | 点击node节点触发 | ({ visible })=>{} |
filechange | 点击文件触发 | ({ visible })=>{} |