element-ui el-cascader 级联选择器 联动默认值
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
在使用 element-ui 的 el-cascader 组件根据后台返回的数据,需要展示一个默认值,官网给出的例子https://element.eleme.cn/2.0/#/zh-CN/component/cascader 借鉴了一下,话不多说直接上代码:
效果图:
代码块:
<template>
<div class="block">
<span class="demonstration">默认 click 触发子菜单</span>
<el-cascader
:props="defaultParams"
:options="options"
v-model="selectedOptions">
</el-cascader>
</div>
</template>
<script>
export default {
data () {
return {
options: [],
selectedOptions: ['1', '4'],
defaultParams: {
label: 'name',
value: 'id',
children: 'sub'
},
}
},
create () {
// 这里是接口返回的数据
let options = {
"data": [{
"id": "1",
"name": "水果",
"level": "1",
"pid": "0",
"status": "1",
"sub": [{
"id": "4",
"name": "苹果",
"level": "2",
"pid": "1",
"status": "1"
}, {
"id": "8",
"name": "香蕉",
"level": "2",
"pid": "1",
"status": "1"
}]
}, {
"id": "2",
"name": "食品",
"level": "1",
"pid": "0",
"status": "1",
"sub": [{
"id": "5",
"name": "馒头",
"level": "2",
"pid": "2",
"status": "1"
}, {
"id": "6",
"name": "大米",
"level": "2",
"pid": "2",
"status": "1"
}]
}]
}
this.options = options.data
}
}
</script>
到这里基本上算是完成了。
注意:如果说后端返回的 id 是 String 类型,这里的默认值也是 String:selectedOptions: ['1', '4'],如果返回的是 Number 类型,默认值 selectedOptions: [1, 4]
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
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 8 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)