uniapp 常用的地区行业各种多选多选,支持回显,复制粘贴可使用

uniapp 常用的地区行业各种多选多选,支持回显

必须导入uni-popup 弹出层 该组件

1.目前项目开发中使用到这类似挺多的,记录一下,方便以后是使用

2.使用前提,目前不做无限级,只支持二维数组,模板里只循环了两层,如果有特殊需求,请自行修改

3.数据子级目前是使用的children字段,显示名字使用的name,如多你的后端返回的数据格式字段不一样,请自己先递归处理一下,这两个对应上,

4.大概处理如下,

	addCheckAttr(arr) {
				return arr.map(item => {
					item.checked = false
					item.label = item.name   // 这里将你后端返回的名字赋值成你想要的字段
					if (item.children && Array.isArray(item.children)) {
						item.children = this.addCheckAttr(item.children)
					}
					return item
				})
			},

5.废话不多说直接粘贴复制使用

具体使用如下(有更加写法请自行修改)

1.新建组件 tree.vue
2.注意事项 ,如果数据回显,单选的情况下父组件你就不要传多个值进去

<template>
	<view class="content">
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class='head'>
				<view class='leftbnt' @click='handReset'>
					<button>重置</button>
				</view>
				<view class='rightbnt' @click='determine'>
					<button :style="{'color':confirmColor}">确认</button>
				</view>
			</view>

			<view class='mianbox' :style="{ 'height': defH + 'px'}">
				<view v-for="(item,index) in list" :key='index'>
					<view class='treeTit'>
						<view style='margin-left:10px;'> {{item.name}}</view>
					</view>
					<view v-for="(it,i) in item.children " :key='i'
						:style="{background: it.checked ? itemColor : '',color: it.checked ? itemtxtColor : ''}"
						:class="[it.checked ? 'addClass':'subli']" @tap="handItem(index,i)">
						{{it.name}}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		props: {
			// 窗口默认高度 暂未完善百分比
			defH: {
				type: Number,
				default: 550
			},
			dataTree: { // 父组件传递下来的数据
				type: Array
			},
			defchech: { // 默认选中
				type: Array
			},
			confirmColor: { // 确认按钮的颜色
				type: String,
				default: '#54b0ab'
			},
			itemColor: { // 选中的子级item 背景色
				type: String,
				default: '#e4f6f8'
			},
			itemtxtColor: { // 选中的子级item 背景色
				type: String,
				default: '#54b0ab'
			},
			// 是否支持多选
			isMultiple: {
				type: Boolean,
				default: true
			},
			isnumber: { // 最多可选数量
				type: Number,
				default: 5
			},
		},
		data() {
			return {
				newData: [],
				list: []
			}
		},
		methods: {
			handItem(index, i) {
				
				if (this.isMultiple) {
				  this.clickItem(index, i)
				} else {
					this.list = this.addCheckAttr(this.list)
					this.clickItem(index, i)
				}
			},
			clickItem(index, i) {
				this.list[index].children[i].checked = !this.list[index].children[i].checked
				this.someArr()
			},
			addCheckAttr(arr) {
				return arr.map(item => {
					item.checked = false
					item.label = item.name
					if (item.children && Array.isArray(item.children)) {
						item.children = this.addCheckAttr(item.children)
					}
					return item
				})
			},
			open() {
				this.list = this.dataTree
				this.$refs.popup.open('bottom')
				this.list = this.checkedTreeData(this.list)
				this.someArr()
			},
			someArr() {
				this.newData = this.findCheckedElements(this.list)
			},
			// 遍历选出相选中的数据
			findCheckedElements(arr) {
				let result = []

				function traverse(item) {
					if (item.checked) {
						result.push(item)
					}
					if (item.children) {
						for (let child of item.children) {
							traverse(child)
						}
					}
				}
				for (let item of arr) {
					traverse(item)
				}
				return result
			},
			// 回显数据
			checkedTreeData(arr) {
				return arr.map(item => {
					if (this.defchech.indexOf(item.id) !== -1) {
						item.checked = true
					} else {
						item.checked = false
					}
					if (item.children && Array.isArray(item.children)) {
						item.children = this.checkedTreeData(item.children)
					}
					return item
				})
			},

			close() {
				this.$refs.popup.close()
			},
			// 重置
			handReset() {
				this.list = this.addCheckAttr(this.dataTree)
				this.someArr()
			},
			// 确认
			determine() {
				if(this.newData.length > this.isnumber){
					uni.showToast({
						title: `最多选择${this.isnumber}个`
					})
					return
				}
				this.$emit("onChange", this.newData)
			}
		}
	}
</script>

<style scoped>
	.treeTit {
		width: 100%;
		height: 45px;
		font-size: 16px;
		font-weight: bold;
		position: sticky;
		top: -1px;
		left: 0px;
		line-height: 45px;
		background: #fff;
	}

	.subli {
		display: inline-block;
		margin: 4px;
		padding: 5px 10px;
		background: #f6f6f6;
		border: 1px solid #fff;
		border-radius: 10rpx;
	}

	.addClass {
		display: inline-block;
		margin: 4px;
		padding: 5px 10px;
		border: 1px solid #4bb4a5;
		background: #f6f6f6;
		border-radius: 10rpx;
	}

	.mianbox {
		width: 100%;
		height: 300px;
		background: #fff;
		overflow: scroll;
	}

	.head {
		width: 100%;
		height: 45px;
		display: flex;
		align-items: center;
	}

	.leftbnt {
		flex: 1;
		text-align: center;
		border: 1px solid #f4f4f4;
	}

	.rightbnt {
		flex: 1;
		text-align: center;
		border: 1px solid #f4f4f4;
		font-weight: bold;
	}
</style>

2.使用,在你的页面中引入组件注册

import TreeList from "./tree.vue"  // 根据自己的实际目录

3.例如带index页面使用,

<template>
	<view>
		<TreeList ref='child' :dataTree='dataTree' :defchech='defChecked' :isMultiple='true' :defH="600"
			 itemColor='#e4f6f8' @onChange='onChange' />
		<view v-for='(item,index) in list'>
			{{item.name}}
		</view>
	</view>
</template>
<script>
	import TreeList from "../../components/tree.vue"
	export default {
		components: {
			TreeList
		},
		data() {
			return {
				list: [],
				 // 这里需要注意 后端返回的id 的类型 字符串还是数子  要传对用类型单选你就不要乱传多个值进去
				defChecked: [17],
				dataTree: [{
						"id": 15,
						"name": "互联网/IT/电子/通信",
						"level": 0,
						"parentId": 0,
						"sort": 2,
						"status": "00",
						"isDisabled": true,
						"children": [{
								"id": 16,
								"name": "电子商务",
								"level": 1,
								"parentId": 15,
								"sort": 1,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 17,
								"name": "企业服务",
								"level": 1,
								"parentId": 15,
								"sort": 2,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 18,
								"name": "物联网",
								"level": 1,
								"parentId": 15,
								"sort": 3,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 19,
								"name": "新媒体",
								"level": 1,
								"parentId": 15,
								"sort": 4,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 20,
								"name": "人工智能",
								"level": 1,
								"parentId": 15,
								"sort": 5,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 21,
								"name": "智能硬件",
								"level": 1,
								"parentId": 15,
								"sort": 6,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 22,
								"name": "在线教育",
								"level": 1,
								"parentId": 15,
								"sort": 7,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 23,
								"name": "在线医疗",
								"level": 1,
								"parentId": 15,
								"sort": 8,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 24,
								"name": "新零售",
								"level": 1,
								"parentId": 15,
								"sort": 9,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 25,
								"name": "区块链",
								"level": 1,
								"parentId": 15,
								"sort": 10,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 26,
								"name": "游戏",
								"level": 1,
								"parentId": 15,
								"sort": 11,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 27,
								"name": "社交网络",
								"level": 1,
								"parentId": 15,
								"sort": 12,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 28,
								"name": "在线招聘/求职",
								"level": 1,
								"parentId": 15,
								"sort": 13,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 29,
								"name": "云计算/大数据",
								"level": 1,
								"parentId": 15,
								"sort": 14,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 30,
								"name": "网络/信息安全",
								"level": 1,
								"parentId": 15,
								"sort": 15,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 31,
								"name": "在线生活服务(O2O)",
								"level": 1,
								"parentId": 15,
								"sort": 16,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 32,
								"name": "在线音乐/视频/阅读",
								"level": 1,
								"parentId": 15,
								"sort": 17,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 33,
								"name": "互联网",
								"level": 1,
								"parentId": 15,
								"sort": 18,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 34,
								"name": "IT服务",
								"level": 1,
								"parentId": 15,
								"sort": 19,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 35,
								"name": "计算机软件",
								"level": 1,
								"parentId": 15,
								"sort": 20,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 36,
								"name": "计算机硬件",
								"level": 1,
								"parentId": 15,
								"sort": 21,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 37,
								"name": "通信/网络设备",
								"level": 1,
								"parentId": 15,
								"sort": 22,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 38,
								"name": "运营商/增值服务",
								"level": 1,
								"parentId": 15,
								"sort": 23,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 39,
								"name": "电子/半导体/集成电路",
								"level": 1,
								"parentId": 15,
								"sort": 24,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 40,
								"name": "消费电子产品",
								"level": 1,
								"parentId": 15,
								"sort": 25,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 41,
								"name": "光电子行业",
								"level": 1,
								"parentId": 15,
								"sort": 26,
								"status": "00",
								"isDisabled": false,
								"children": []
							}
						]
					},
					{
						"id": 42,
						"name": "生活服务",
						"level": 0,
						"parentId": 0,
						"sort": 3,
						"status": "00",
						"isDisabled": true,
						"children": [{
								"id": 43,
								"name": "餐饮服务",
								"level": 1,
								"parentId": 42,
								"sort": 1,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 44,
								"name": "酒店/民宿",
								"level": 1,
								"parentId": 42,
								"sort": 2,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 45,
								"name": "旅游/景区",
								"level": 1,
								"parentId": 42,
								"sort": 3,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 46,
								"name": "美容/美发",
								"level": 1,
								"parentId": 42,
								"sort": 4,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 47,
								"name": "婚庆/摄影",
								"level": 1,
								"parentId": 42,
								"sort": 5,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 48,
								"name": "休闲/娱乐",
								"level": 1,
								"parentId": 42,
								"sort": 6,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 49,
								"name": "回收/维修",
								"level": 1,
								"parentId": 42,
								"sort": 7,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 50,
								"name": "家政服务",
								"level": 1,
								"parentId": 42,
								"sort": 8,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 51,
								"name": "宠物服务",
								"level": 1,
								"parentId": 42,
								"sort": 9,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 52,
								"name": "运动/健身",
								"level": 1,
								"parentId": 42,
								"sort": 10,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 53,
								"name": "保健/养生",
								"level": 1,
								"parentId": 42,
								"sort": 11,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 54,
								"name": "养老服务",
								"level": 1,
								"parentId": 42,
								"sort": 12,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 55,
								"name": "搬家/生活配送",
								"level": 1,
								"parentId": 42,
								"sort": 13,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 56,
								"name": "其他生活服务",
								"level": 1,
								"parentId": 42,
								"sort": 14,
								"status": "00",
								"isDisabled": false,
								"children": []
							}
						]
					},
					{
						"id": 57,
						"name": "批发/零售/贸易",
						"level": 0,
						"parentId": 0,
						"sort": 4,
						"status": "00",
						"isDisabled": true,
						"children": [{
								"id": 58,
								"name": "快速消费品",
								"level": 1,
								"parentId": 57,
								"sort": 1,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 59,
								"name": "耐用消费品",
								"level": 1,
								"parentId": 57,
								"sort": 2,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 61,
								"name": "零售/批发",
								"level": 1,
								"parentId": 57,
								"sort": 3,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 62,
								"name": "食品/饮料",
								"level": 1,
								"parentId": 57,
								"sort": 4,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 63,
								"name": "烟草/酒业",
								"level": 1,
								"parentId": 57,
								"sort": 5,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 64,
								"name": "日化",
								"level": 1,
								"parentId": 57,
								"sort": 6,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 65,
								"name": "服装/纺织/皮革",
								"level": 1,
								"parentId": 57,
								"sort": 7,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 66,
								"name": "奢侈品",
								"level": 1,
								"parentId": 57,
								"sort": 8,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 67,
								"name": "玩具/礼品",
								"level": 1,
								"parentId": 57,
								"sort": 9,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 68,
								"name": "珠宝/首饰",
								"level": 1,
								"parentId": 57,
								"sort": 10,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 69,
								"name": "办公用品/设备",
								"level": 1,
								"parentId": 57,
								"sort": 11,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 70,
								"name": "工艺品/收藏品/艺术品",
								"level": 1,
								"parentId": 57,
								"sort": 12,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 71,
								"name": "家具/家居/家电",
								"level": 1,
								"parentId": 57,
								"sort": 13,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 72,
								"name": "贸易/进出口",
								"level": 1,
								"parentId": 57,
								"sort": 14,
								"status": "00",
								"isDisabled": false,
								"children": []
							}
						]
					},
					{
						"id": 73,
						"name": "专业服务",
						"level": 0,
						"parentId": 0,
						"sort": 5,
						"status": "00",
						"isDisabled": true,
						"children": [{
								"id": 74,
								"name": "法律服务",
								"level": 1,
								"parentId": 73,
								"sort": 1,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 75,
								"name": "咨询服务",
								"level": 1,
								"parentId": 73,
								"sort": 2,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 76,
								"name": "翻译服务",
								"level": 1,
								"parentId": 73,
								"sort": 3,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 77,
								"name": "人力资源服务",
								"level": 1,
								"parentId": 73,
								"sort": 4,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 78,
								"name": "财务/审计/税务",
								"level": 1,
								"parentId": 73,
								"sort": 5,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 79,
								"name": "工程技术与设计服务",
								"level": 1,
								"parentId": 73,
								"sort": 6,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 80,
								"name": "检测/认证",
								"level": 1,
								"parentId": 73,
								"sort": 7,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 81,
								"name": "景区/商业/市场等综合管理",
								"level": 1,
								"parentId": 73,
								"sort": 8,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 82,
								"name": "商业代理服务",
								"level": 1,
								"parentId": 73,
								"sort": 9,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 83,
								"name": "专利/商标/知识产权",
								"level": 1,
								"parentId": 73,
								"sort": 10,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 84,
								"name": "租赁服务",
								"level": 1,
								"parentId": 73,
								"sort": 11,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 85,
								"name": "专业技术服务",
								"level": 1,
								"parentId": 73,
								"sort": 12,
								"status": "00",
								"isDisabled": false,
								"children": []
							}
						]
					},
					{
						"id": 86,
						"name": "生物医药/医疗健康",
						"level": 0,
						"parentId": 0,
						"sort": 6,
						"status": "00",
						"isDisabled": true,
						"children": [{
								"id": 87,
								"name": "医院",
								"level": 1,
								"parentId": 86,
								"sort": 1,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 88,
								"name": "卫生服务",
								"level": 1,
								"parentId": 86,
								"sort": 2,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 89,
								"name": "生物工程",
								"level": 1,
								"parentId": 86,
								"sort": 3,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 90,
								"name": "医药制造",
								"level": 1,
								"parentId": 86,
								"sort": 4,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 91,
								"name": "医疗检测",
								"level": 1,
								"parentId": 86,
								"sort": 5,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 92,
								"name": "医药批发/零售",
								"level": 1,
								"parentId": 86,
								"sort": 6,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 93,
								"name": "医疗设备/器械",
								"level": 1,
								"parentId": 86,
								"sort": 7,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 94,
								"name": "IVD",
								"level": 1,
								"parentId": 86,
								"sort": 8,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 95,
								"name": "医美/健康服务",
								"level": 1,
								"parentId": 86,
								"sort": 9,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 96,
								"name": "医药外包",
								"level": 1,
								"parentId": 86,
								"sort": 10,
								"status": "00",
								"isDisabled": false,
								"children": []
							}
						]
					},
					{
						"id": 97,
						"name": "金融业",
						"level": 0,
						"parentId": 0,
						"sort": 7,
						"status": "00",
						"isDisabled": true,
						"children": [{
								"id": 98,
								"name": "银行",
								"level": 1,
								"parentId": 97,
								"sort": 1,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 99,
								"name": "保险",
								"level": 1,
								"parentId": 97,
								"sort": 2,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 100,
								"name": "基金",
								"level": 1,
								"parentId": 97,
								"sort": 3,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 101,
								"name": "信托",
								"level": 1,
								"parentId": 97,
								"sort": 4,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 102,
								"name": "证券/期货",
								"level": 1,
								"parentId": 97,
								"sort": 5,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 103,
								"name": "投资/融资",
								"level": 1,
								"parentId": 97,
								"sort": 6,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 104,
								"name": "汽车金融",
								"level": 1,
								"parentId": 97,
								"sort": 7,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 105,
								"name": "互联网金融/小额贷款",
								"level": 1,
								"parentId": 97,
								"sort": 8,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 106,
								"name": "租赁/拍卖/典当/担保",
								"level": 1,
								"parentId": 97,
								"sort": 9,
								"status": "00",
								"isDisabled": false,
								"children": []
							}
						]
					},
					{
						"id": 122,
						"name": "高技术制造业",
						"level": 0,
						"parentId": 0,
						"sort": 8,
						"status": "00",
						"isDisabled": true,
						"children": [{
								"id": 123,
								"name": "人工智能",
								"level": 1,
								"parentId": 122,
								"sort": 1,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 124,
								"name": "智能硬件",
								"level": 1,
								"parentId": 122,
								"sort": 2,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 125,
								"name": "物联网",
								"level": 1,
								"parentId": 122,
								"sort": 3,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 126,
								"name": "区块链",
								"level": 1,
								"parentId": 122,
								"sort": 4,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 127,
								"name": "云计算/大数据",
								"level": 1,
								"parentId": 122,
								"sort": 5,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 128,
								"name": "计算机硬件",
								"level": 1,
								"parentId": 122,
								"sort": 6,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 129,
								"name": "通信/网络设备",
								"level": 1,
								"parentId": 122,
								"sort": 7,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 130,
								"name": "电子/半导体/集成电路",
								"level": 1,
								"parentId": 122,
								"sort": 8,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 131,
								"name": "消费电子产品",
								"level": 1,
								"parentId": 122,
								"sort": 9,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 132,
								"name": "光电子行业",
								"level": 1,
								"parentId": 122,
								"sort": 10,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 133,
								"name": "船舶/航空/航天/火车制造",
								"level": 1,
								"parentId": 122,
								"sort": 11,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 134,
								"name": "电气机械/电力设备",
								"level": 1,
								"parentId": 122,
								"sort": 12,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 135,
								"name": "电子设备制造",
								"level": 1,
								"parentId": 122,
								"sort": 13,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 136,
								"name": "机器人",
								"level": 1,
								"parentId": 122,
								"sort": 14,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 137,
								"name": "专用设备制造",
								"level": 1,
								"parentId": 122,
								"sort": 15,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 138,
								"name": "通用设备制造",
								"level": 1,
								"parentId": 122,
								"sort": 16,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 139,
								"name": "仪器仪表制造",
								"level": 1,
								"parentId": 122,
								"sort": 17,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 140,
								"name": "工业自动化",
								"level": 1,
								"parentId": 122,
								"sort": 18,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 141,
								"name": "新材料",
								"level": 1,
								"parentId": 122,
								"sort": 19,
								"status": "00",
								"isDisabled": false,
								"children": []
							}
						]
					},
					{
						"id": 142,
						"name": "制造业",
						"level": 0,
						"parentId": 0,
						"sort": 9,
						"status": "00",
						"isDisabled": true,
						"children": [{
								"id": 143,
								"name": "船舶/航空/航天/火车制造",
								"level": 1,
								"parentId": 142,
								"sort": 1,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 144,
								"name": "电气机械/电力设备",
								"level": 1,
								"parentId": 142,
								"sort": 2,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 145,
								"name": "电子设备制造",
								"level": 1,
								"parentId": 142,
								"sort": 3,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 146,
								"name": "机器人",
								"level": 1,
								"parentId": 142,
								"sort": 4,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 147,
								"name": "钢铁/有色金属冶炼及加工",
								"level": 1,
								"parentId": 142,
								"sort": 5,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 148,
								"name": "专用设备制造",
								"level": 1,
								"parentId": 142,
								"sort": 6,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 149,
								"name": "军工制造",
								"level": 1,
								"parentId": 142,
								"sort": 7,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 150,
								"name": "金属制品业",
								"level": 1,
								"parentId": 142,
								"sort": 8,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 151,
								"name": "通用设备制造",
								"level": 1,
								"parentId": 142,
								"sort": 9,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 152,
								"name": "仪器仪表制造",
								"level": 1,
								"parentId": 142,
								"sort": 10,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 153,
								"name": "摩托车/自行车制造",
								"level": 1,
								"parentId": 142,
								"sort": 11,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 154,
								"name": "非金属矿物制品业",
								"level": 1,
								"parentId": 142,
								"sort": 12,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 155,
								"name": "新材料",
								"level": 1,
								"parentId": 142,
								"sort": 13,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 156,
								"name": "化学纤维制造业",
								"level": 1,
								"parentId": 142,
								"sort": 14,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 157,
								"name": "化学原料/化学制品",
								"level": 1,
								"parentId": 142,
								"sort": 15,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 158,
								"name": "日化产品制造",
								"level": 1,
								"parentId": 142,
								"sort": 16,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 159,
								"name": "纺织业/服饰产品加工制造",
								"level": 1,
								"parentId": 142,
								"sort": 17,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 160,
								"name": "农副产品加工制造",
								"level": 1,
								"parentId": 142,
								"sort": 18,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 161,
								"name": "燃料资源加工制造",
								"level": 1,
								"parentId": 142,
								"sort": 19,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 162,
								"name": "橡胶和塑料制品",
								"level": 1,
								"parentId": 142,
								"sort": 20,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 163,
								"name": "文体/办公设备制造",
								"level": 1,
								"parentId": 142,
								"sort": 21,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 164,
								"name": "家具制造",
								"level": 1,
								"parentId": 142,
								"sort": 22,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 165,
								"name": "印刷/包装/造纸",
								"level": 1,
								"parentId": 142,
								"sort": 23,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 166,
								"name": "工业自动化",
								"level": 1,
								"parentId": 142,
								"sort": 24,
								"status": "00",
								"isDisabled": false,
								"children": []
							}
						]
					},
					{
						"id": 167,
						"name": "广告/传媒/文化/体育",
						"level": 0,
						"parentId": 0,
						"sort": 10,
						"status": "00",
						"isDisabled": true,
						"children": [{
								"id": 168,
								"name": "广告/营销",
								"level": 1,
								"parentId": 167,
								"sort": 1,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 169,
								"name": "广播/影视",
								"level": 1,
								"parentId": 167,
								"sort": 2,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 170,
								"name": "会议/展览",
								"level": 1,
								"parentId": 167,
								"sort": 3,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 171,
								"name": "文化艺术/娱乐",
								"level": 1,
								"parentId": 167,
								"sort": 4,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 172,
								"name": "体育",
								"level": 1,
								"parentId": 167,
								"sort": 5,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 173,
								"name": "新闻/出版",
								"level": 1,
								"parentId": 167,
								"sort": 6,
								"status": "00",
								"isDisabled": false,
								"children": []
							}
						]
					},
					{
						"id": 174,
						"name": "教育培训/科研",
						"level": 0,
						"parentId": 0,
						"sort": 11,
						"status": "00",
						"isDisabled": true,
						"children": [{
								"id": 175,
								"name": "培训/辅导服务",
								"level": 1,
								"parentId": 174,
								"sort": 1,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 176,
								"name": "学校/学历教育",
								"level": 1,
								"parentId": 174,
								"sort": 2,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 177,
								"name": "学术/科研",
								"level": 1,
								"parentId": 174,
								"sort": 3,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 178,
								"name": "科学技术推广",
								"level": 1,
								"parentId": 174,
								"sort": 4,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 179,
								"name": "其他教育培训",
								"level": 1,
								"parentId": 174,
								"sort": 5,
								"status": "00",
								"isDisabled": false,
								"children": []
							}
						]
					},
					{
						"id": 180,
						"name": "汽车",
						"level": 0,
						"parentId": 0,
						"sort": 12,
						"status": "00",
						"isDisabled": true,
						"children": [{
								"id": 181,
								"name": "汽车研发/制造",
								"level": 1,
								"parentId": 180,
								"sort": 1,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 182,
								"name": "汽车零部件",
								"level": 1,
								"parentId": 180,
								"sort": 2,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 183,
								"name": "4S店/后市场",
								"level": 1,
								"parentId": 180,
								"sort": 3,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 184,
								"name": "新能源汽车",
								"level": 1,
								"parentId": 180,
								"sort": 4,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 185,
								"name": "汽车智能网联",
								"level": 1,
								"parentId": 180,
								"sort": 5,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 186,
								"name": "汽车经销商",
								"level": 1,
								"parentId": 180,
								"sort": 6,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 187,
								"name": "汽车后市场",
								"level": 1,
								"parentId": 180,
								"sort": 7,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 188,
								"name": "摩托车/自行车制造",
								"level": 1,
								"parentId": 180,
								"sort": 8,
								"status": "00",
								"isDisabled": false,
								"children": []
							}
						]
					},
					{
						"id": 189,
						"name": "房地产/建筑",
						"level": 0,
						"parentId": 0,
						"sort": 13,
						"status": "00",
						"isDisabled": true,
						"children": [{
								"id": 190,
								"name": "房地产开发经营",
								"level": 1,
								"parentId": 189,
								"sort": 1,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 191,
								"name": "工程施工",
								"level": 1,
								"parentId": 189,
								"sort": 2,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 192,
								"name": "建筑设计",
								"level": 1,
								"parentId": 189,
								"sort": 3,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 193,
								"name": "装修装饰",
								"level": 1,
								"parentId": 189,
								"sort": 4,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 194,
								"name": "建筑材料",
								"level": 1,
								"parentId": 189,
								"sort": 5,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 195,
								"name": "房地产中介/租赁",
								"level": 1,
								"parentId": 189,
								"sort": 6,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 196,
								"name": "物业管理",
								"level": 1,
								"parentId": 189,
								"sort": 7,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 197,
								"name": "房屋建筑工程",
								"level": 1,
								"parentId": 189,
								"sort": 8,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 198,
								"name": "土木工程",
								"level": 1,
								"parentId": 189,
								"sort": 9,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 199,
								"name": "机电工程",
								"level": 1,
								"parentId": 189,
								"sort": 10,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 200,
								"name": "建筑工程咨询服务",
								"level": 1,
								"parentId": 189,
								"sort": 11,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 201,
								"name": "土地与公共设施管理",
								"level": 1,
								"parentId": 189,
								"sort": 12,
								"status": "00",
								"isDisabled": false,
								"children": []
							}
						]
					},
					{
						"id": 202,
						"name": "交通运输/物流",
						"level": 0,
						"parentId": 0,
						"sort": 14,
						"status": "00",
						"isDisabled": true,
						"children": [{
								"id": 203,
								"name": "交通/运输",
								"level": 1,
								"parentId": 202,
								"sort": 1,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 204,
								"name": "物流/仓储",
								"level": 1,
								"parentId": 202,
								"sort": 2,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 205,
								"name": "即时配送",
								"level": 1,
								"parentId": 202,
								"sort": 3,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 206,
								"name": "快递",
								"level": 1,
								"parentId": 202,
								"sort": 4,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 207,
								"name": "公路物流",
								"level": 1,
								"parentId": 202,
								"sort": 5,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 208,
								"name": "同城货运",
								"level": 1,
								"parentId": 202,
								"sort": 6,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 209,
								"name": "跨境物流",
								"level": 1,
								"parentId": 202,
								"sort": 7,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 210,
								"name": "装卸搬运和仓储业",
								"level": 1,
								"parentId": 202,
								"sort": 8,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 211,
								"name": "客运服务",
								"level": 1,
								"parentId": 202,
								"sort": 9,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 212,
								"name": "港口/铁路/公路/机场",
								"level": 1,
								"parentId": 202,
								"sort": 10,
								"status": "00",
								"isDisabled": false,
								"children": []
							}
						]
					},
					{
						"id": 213,
						"name": "能源/化工/环保",
						"level": 0,
						"parentId": 0,
						"sort": 15,
						"status": "00",
						"isDisabled": true,
						"children": [{
								"id": 214,
								"name": "石油/石化",
								"level": 1,
								"parentId": 213,
								"sort": 1,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 215,
								"name": "化工",
								"level": 1,
								"parentId": 213,
								"sort": 2,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 216,
								"name": "矿产/地质",
								"level": 1,
								"parentId": 213,
								"sort": 3,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 217,
								"name": "采掘/冶炼",
								"level": 1,
								"parentId": 213,
								"sort": 4,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 218,
								"name": "电力/热力/燃气/水利",
								"level": 1,
								"parentId": 213,
								"sort": 5,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 219,
								"name": "新能源",
								"level": 1,
								"parentId": 213,
								"sort": 6,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 220,
								"name": "环保",
								"level": 1,
								"parentId": 213,
								"sort": 7,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 221,
								"name": "光伏",
								"level": 1,
								"parentId": 213,
								"sort": 8,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 222,
								"name": "储能",
								"level": 1,
								"parentId": 213,
								"sort": 9,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 223,
								"name": "动力电池",
								"level": 1,
								"parentId": 213,
								"sort": 10,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 224,
								"name": "风电",
								"level": 1,
								"parentId": 213,
								"sort": 11,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 225,
								"name": "其他新能源",
								"level": 1,
								"parentId": 213,
								"sort": 12,
								"status": "00",
								"isDisabled": false,
								"children": []
							}
						]
					},
					{
						"id": 226,
						"name": "农/林/牧/渔",
						"level": 0,
						"parentId": 0,
						"sort": 16,
						"status": "00",
						"isDisabled": true,
						"children": [{
							"id": 227,
							"name": "农/林/牧/渔",
							"level": 1,
							"parentId": 226,
							"sort": 1,
							"status": "00",
							"isDisabled": false,
							"children": []
						}]
					},
					{
						"id": 228,
						"name": "政府/非盈利机构",
						"level": 0,
						"parentId": 0,
						"sort": 17,
						"status": "00",
						"isDisabled": true,
						"children": [{
								"id": 229,
								"name": "政府/公共事业",
								"level": 1,
								"parentId": 228,
								"sort": 1,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 230,
								"name": "社团/组织/社会保障",
								"level": 1,
								"parentId": 228,
								"sort": 2,
								"status": "00",
								"isDisabled": false,
								"children": []
							},
							{
								"id": 231,
								"name": "养老/孤儿/看护",
								"level": 1,
								"parentId": 228,
								"sort": 3,
								"status": "00",
								"isDisabled": false,
								"children": []
							}
						]
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			handOpen() {
				this.$refs.child.open()
			},
			onChange(e) {
				console.log(e)
				this.list = e
				this.$refs.child.close()
			}
		}
	}
</script>

<style>

</style>
相关推荐
肖永威3 分钟前
CentOS环境上离线安装python3及相关包
linux·运维·机器学习·centos
tian2kong6 分钟前
Centos 7 修改YUM镜像源地址为阿里云镜像地址
linux·阿里云·centos
布鲁格若门10 分钟前
CentOS 7 桌面版安装 cuda 12.4
linux·运维·centos·cuda
系统之家装机大师12 分钟前
Win11 22H2/23H2系统11月可选更新KB5046732发布!
windows·电脑
系统之家装机大师14 分钟前
微软发布Win11 24H2系统11月可选更新KB5046740!
windows·电脑
C-cat.17 分钟前
Linux|进程程序替换
linux·服务器·microsoft
怀澈12219 分钟前
高性能服务器模型之Reactor(单线程版本)
linux·服务器·网络·c++
DC_BLOG21 分钟前
Linux-Apache静态资源
linux·运维·apache
学Linux的语莫23 分钟前
Ansible Playbook剧本用法
linux·服务器·云计算·ansible
skywalk81631 小时前
树莓派2 安装raspberry os 并修改成固定ip
linux·服务器·网络·debian·树莓派·raspberry