asd/asd-wx/uni_modules/zwx-dropDown/components/zwx-dropDown
愉快的大福 340a467ba1 init
2024-11-21 11:32:11 +08:00
..
css init 2024-11-21 11:32:11 +08:00
README.md init 2024-11-21 11:32:11 +08:00
zwx-dropDown.vue init 2024-11-21 11:32:11 +08:00

递归组件

适用于组织架构的基础展示

入口文件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 })=>{}