vue使用element-ui的cascader，value和label为后台返回的值，并获取选中的value和label值

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

1、从后台返回的数据结构

expenseList: [
		{
			expenseId: 1,
			expenseItem: '运输费-1',
			child: [
				expenseId: 11,
				expenseItem: '运输费-2',
				child: [
					expenseId: 111,
					expenseItem: '运输费-3'
				]
			]
		}
	]

2、给cascader绑定props

<el-cascader
                 :options="expenseList"
                 :props="optionProps"
                 v-model="optForm.expenseId"
                 @change="handleChange"
                 ref="cascaderItem"
                 :show-all-levels="false"
                 clearable></el-cascader>

//:show-all-levels="false"显示选中项最后一级的标签

 3、在data中定义props

 data() {
    return {
      expenseList:[],
      optionProps: {
          value: 'expenseId',
          label: 'expenseItem',
          children: 'children',
          checkStrictly: true, //选择任意一级
      },
   }
}

4、获取最终选择的最后一级的id

 handleChange(itemIdArr){
      //获取id
      let val=itemIdArr[itemIdArr.length-1]
      this.optForm.expenseId=val
    },

5、获取选中的label值，给el-cascader加ref="cascaderItem"，通过下面代码即可获得：

this.expenseItem = this.$refs['cascaderItem'].inputValue