为什么要配置el-cascaderprops?

如果配置了这个选项,请求回来的数据,根本不用你去递归处理,只需要把响应的数据赋值给数据源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});
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐