element ui级联选择器props的配置

为什么要配置el-cascader的props?

如果配置了这个选项，请求回来的数据，根本不用你去递归处理，只需要把响应的数据赋值给数据源cateList

代码如下:

<el-cascader
  v-model="cateValue"
  :options="cateList"
  :props="cateListProps"
 >
</el-cascader>

data中:

cateList: [],                   //数据源
cateListProps: {
   value: 'id',                 //匹配响应数据中的id
   label: 'name',               //匹配响应数据中的name
   children: 'children'         //匹配响应数据中的children
}

好了，这样配置，你只需要把请求返回来的数组赋值给数据源cateList

例子: 比如我请求回来的响应数据是这样的,这时候只需要把responseData赋值给cateList,你就能在el-cascader中看到数据，这是一个二级联动的，假设你有三级，它一样能匹配到

responseData: [
	{  id: 1, name: '乔丹'    },
	{  id: 2, name: '科比'    },
	{  id: 3, name: '杜兰特'  },
	{  id: 4, name: '帕克' , children: [ {  id: 11, name: '球童'  } ] }
]

好处是不用自己递归遍历，如果不配置props选项呢，那我需要递归遍历处理, 如下

let list = responseData;
this.cateList= [];
for (let i = 0; i < list.length; i++) {
  let children = [];
  if (list[i].children != null && list[i].children.length > 0) {
    for (let j = 0; j < list[i].children.length; j++) {
      children.push({label: list[i].children[j].name, value: list[i].children[j].id});
    }
  }
  this.cateList.push({label: list[i].name, value: list[i].id, children: children});
}