element ui级联选择器props的配置
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
为什么要配置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});
}
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 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)