vue使用element-ui的cascader级联选择器指定默认的value和label为后端返回的对应键值_el-cascader 不是我们自己数据结构的键值

项目场景：

在使用element-ui组件库的cascader级联选择器组件时，我们发现组件默认的数据结构是label为键名，value为键值，但通常后端返回的数据键值并不是value和label，就需要我们通过props属性label和value进行自定义。

---

解决方案：

一、这是我们从后端拿到的数据结构

	cityList: [
		{
			id: 1,
			name: '北京',
			child: [
				id: 11,
				name: '大兴区',
				child: [
					id: 111,
					name: '亦庄'
				]
			]
		}
	]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

二、在vue组件中给cascader组件添加:props=“optionProps”

	<el-cascader
	    :options="cityList"
	    :props="optionProps"
	    v-model="selectedOptions"
	    @change="handleChange">
	</el-cascader>
1
2
3
4
5
6

三、在js的data()中声明optionProps

	data(){
		return{
			optionProps: {
				value: 'id',
				label: 'name',
				children: 'child'
			}
		}
	}
1
2
3
4
5
6
7
8
9

---

第一次创作，如果解决了您的问题，请给我一点支持吧，谢谢~