element的Cascader 级联选择器获取label的内容以省市区JSON格式展现出来

本文链接：https://blog.csdn.net/m0_54732824/article/details/124298218

前几天接到个功能，需要Cascader 级联选择器选择多条省市区，Cascader 的value值自然不用说。但是还需要把自己选择的省市区用文字的类型表达出来。这就比较复杂了，找遍了全网貌似没有找到这种功能?如果有大佬有更好的建议可以评论指教一下。楼下见格式

但是观察了一下element的方法好像目前没有方法转成第一张图那种类型。网上好像都是使用getCheckedNodes()获取label

this.$refs['cascader'].getCheckedNodes().map(its => {

	newArray.push(its.pathLabels)
})
console.log(newArray)

这个跟我需要的根本不一样啊！

但是可以用它这种数据来筛选，就是工程量比较浩大，不敢在change事件转，只能在表单提交过程中转好提交到后端。。。所以大家有什么更好的方法，请留言指点一下，谢谢

下面直接贴代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>element次联获取所有label数据</title>
</head>
<style>
	#app,
	html,
	body {
		width: 100%;
		height: 100%;
	}

	.box {
		width: 100%;
		height: 100%;
	}
</style>

<body>
	<div id="app">
		<div class="box">
			<el-cascader-panel ref="cascader" v-model="data" :options="options" :props="{multiple:true,emitPath:false}"
				@change="change"></el-cascader-panel>
			<button @click="send()">点击</button>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: function () {
				return {
					data: [],
					labelArray: [],
					options: [{
							value: '1',
							label: '北京',
							children: [{
								value: '011',
								label: '北京市',
								children: [{
										value: '0011',
										label: '朝阳区'
									},
									{
										value: '0012',
										label: '海淀区'
									},
									{
										value: '0013',
										label: '西城区'
									},
									{
										value: '0014',
										label: '东城区'
									},
								]
							}]
						},
						{
							value: '2',
							label: '上海',
							children: [{
									value: '021',
									label: '上海市',
									children: [{
											value: '0021',
											label: '静安区'
										},
										{
											value: '0022',
											label: '闵行区'
										},
										{
											value: '0023',
											label: '宝山区'
										},
										{
											value: '0024',
											label: '奉贤区'
										},
									]
								},
								{
									value: '022',
									label: '上海市12',
									children: [{
											value: '00221',
											label: 'sadas'
										},
										{
											value: '00222',
											label: 'asdas'
										},
										{
											value: '00223',
											label: '宝山dasd区'
										},
										{
											value: '00224',
											label: '奉asdas贤区'
										},
									]
								},
								{
									value: '022',
									label: '上海市213',
									children: [{
											value: '00212321',
											label: 'sadasddas'
										},
										{
											value: '00222123',
											label: 'asdasdsadas'
										},
										{
											value: '002123e1223',
											label: '宝山asdsaddasd区'
										},
										{
											value: '0022132124',
											label: '奉asasdasddas贤区'
										},
									]
								}
							]
						},
						{
							value: '3',
							label: '安徽',
							children: [{
									value: '031',
									label: '芜湖市',
									children: [{
											value: '0031',
											label: '镜湖区'
										},
										{
											value: '0032',
											label: '弋江区'
										},
										{
											value: '0033',
											label: '鸠江区'
										},
										{
											value: '0034',
											label: '三山区'
										},
									]
								},
								{
									value: '132',
									label: '马鞍山市',
									children: [{
											value: '1321',
											label: '雨山区'
										},
										{
											value: '1322',
											label: '花山区'
										},
									]
								},
								{
									value: '1321231',
									label: '合肥市',
									children: [{
											value: '131231221',
											label: '雨山123123区'
										},
										{
											value: '1322123213',
											label: '花山123123区'
										},
									]
								}
							]
						}
					], //数据
				}
			},
			methods: {
				change(e) {
					let newArray = []
					this.$refs['cascader'].getCheckedNodes().map(its => {
						// console.log(its.pathLabels)
						newArray.push(its.pathLabels)
					})
					console.log(newArray)
					this.labelArray = [...newArray]
				},
				send() {
					let labelArray = [
						...this.labelArray.filter(i => i.length === 1),
						...this.labelArray.filter(i => i.length === 2),
						...this.labelArray.filter(i => i.length === 3),
					]
					console.log('labelArray',labelArray)
					let datas = this.forData(labelArray,[],'')
					console.log(datas)
				},
				forData(arr,newArray,show) {
					for(let i=0;i<arr.length;i++){
						if(arr[i].length === 1){   // 省
							newArray.push({
								name:arr[i][0],
							})
							let sheng = arr.filter(fl => { //删除已选择的省其他多余的数据
								return fl[0] !== arr[i][0]
							})
							this.forData(sheng,newArray)
							break;
						}else if(arr[i].length === 2){	//市
							var bels = false
							var index
							//市可能有出现过的省，也有可能有出现过的市
							if(newArray.length !== 0){ // newArray 有数据的前提下
								for(let na=0;na<newArray.length;na++){
									if(arr[i][0] === newArray[na].name){ //省相同
										bels = true
										index = na

									}else{
										bels = false
									}
								}
							}else{// newArray无数据 直接全选的市
								bels = false
							}
							if(bels){
								newArray[index].children.push({
									name:arr[i][1]
								})
							}else{
								newArray.push({
									name:arr[i][0],
									children:[{
										name:arr[i][1]
									}]
								})
							}
							let shi = arr.filter(fl => {
								return fl[1] !== arr[i][1]
							})
							var bels = false
							var index
							this.forData(shi,newArray)
							break;
						}else{ //区县
							var sheng = false
							var shi = false
							var indec = []
							if(newArray.length !== 0){



								for(let sc = 0;sc<newArray.length;sc++){
									//判断 省是否已经存过了
									if(arr[i][0] === newArray[sc].name){
										sheng = true
										indec.push(sc)
										for(let tc=0;tc<newArray[sc].children.length;tc++){
											if(arr[i][1] === newArray[sc].children[tc].name){
												shi = true
												indec.push(tc)
												break;
											}else{ 
												shi = false
												//break,continue,return
												continue;
											}
										}
										break;
									}else{ //
										sheng =false
									}
								}
							}else{
								sheng =false
							}
							if(!sheng){
								newArray.push({
									name:arr[i][0],
									children:[{
										name:arr[i][1],
										children:[{
											name:arr[i][2]
										}]
									}]
								})
							}else if(sheng && !shi){
								newArray[indec[0]].children.push({
									name:arr[i][1],
									children:[{
										name:arr[i][2]
									}]
								})
							}else if(sheng && shi){
								newArray[indec[0]].children[indec[1]].children.push({
									name:arr[i][2]
								})
							}
							var sheng = false
							var shi = false
							var indec = []
						}
					}
					return newArray
				}
			}
		})
	</script>
</body>

</html>