elementUI el-cascader 隐藏所有子菜单
时间: 2023-07-27 22:14:57 浏览: 98
你可以使用`lazy`属性来实现隐藏所有子菜单,该属性默认为false,设置为true后,只有当点击父级菜单时才会动态加载子菜单。
例如:
```html
<el-cascader
:options="options"
:props="{ lazy: true }"
></el-cascader>
```
这样就可以实现隐藏所有子菜单。如果需要动态加载子菜单,可以在父级菜单的`load`方法中返回子菜单数据。
```javascript
options: [
{
value: 'zhinan',
label: '指南',
children: [],
loading: false
},
{
value: 'zujian',
label: '组件',
children: [],
loading: false
}
],
methods: {
load(node, resolve) {
if (node.level === 0) {
this.loadData(node, resolve, this.options)
} else if (node.level === 1) {
this.loadData(node, resolve, this.options[1].children)
} else {
this.loadData(node, resolve, [])
}
},
loadData(node, resolve, children) {
if (node.level === 0) {
children.push({
value: 'shejiyuanze',
label: '设计原则',
children: [
{
value: 'yizhi',
label: '一致'
},
{
value: 'fankui',
label: '反馈'
}
]
})
} else if (node.level === 1) {
children.push({
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout 布局'
},
{
value: 'color',
label: 'Color 色彩'
}
]
})
}
setTimeout(() => {
resolve(children)
}, 1000)
}
}
```
这里的`load`方法中根据`node.level`的值来判断当前节点是一级菜单还是二级菜单,然后根据父级菜单的`children`属性来动态加载子菜单数据。在加载完成后,通过`resolve`方法将数据返回给`el-cascader`组件。
阅读全文
相关推荐















