在使用 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]