element ui 级联选择器 修改label和value 对应的后端键值

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

解决方案：
一、这是我们从后端拿到的数据结构

    cityList: [
        {
            id: 1,
            name: '北京',
            child: [
                id: 11,
                name: '大兴区',
                child: [
                    id: 111,
                    name: '亦庄'
                ]
            ]
        }
    ]

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

    <el-cascader
        :options="cityList"
        :props="optionProps"
        v-model="selectedOptions"
        @change="handleChange">
    </el-cascader>

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

    data(){
        return{
            optionProps: {
                value: 'id',
                label: 'name',
                children: 'child'
            }
        }
    }