2019-10-22 13:48:51 +08:00
|
|
|
# Cascade
|
2020-01-27 17:09:09 +08:00
|
|
|
Dropdown can be cascade.
|
2019-10-22 13:48:51 +08:00
|
|
|
```html
|
|
|
|
<n-dropdown
|
2020-01-27 17:09:09 +08:00
|
|
|
:options="options"
|
2019-10-22 13:48:51 +08:00
|
|
|
placement="bottom-start"
|
2019-12-01 22:55:39 +08:00
|
|
|
trigger="click"
|
2020-01-27 17:09:09 +08:00
|
|
|
:default-focus="false"
|
2019-12-03 20:00:29 +08:00
|
|
|
@select="handleSelect"
|
2019-10-22 13:48:51 +08:00
|
|
|
>
|
2020-01-27 17:09:09 +08:00
|
|
|
<n-button>People and Some Food to Eat</n-button>
|
2019-10-22 13:48:51 +08:00
|
|
|
</n-dropdown>
|
2019-12-03 20:00:29 +08:00
|
|
|
```
|
2020-01-27 17:09:09 +08:00
|
|
|
|
2019-12-03 20:00:29 +08:00
|
|
|
```js
|
2020-01-27 17:09:09 +08:00
|
|
|
const options = [
|
|
|
|
{
|
|
|
|
label: 'Jay Gatsby',
|
|
|
|
key: 'jay gatsby'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Daisy Buchanan',
|
|
|
|
key: 'daisy buchanan'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: 'divider'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Nick Carraway',
|
|
|
|
key: 'nick carraway'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: 'submenu',
|
|
|
|
label: 'Others',
|
|
|
|
key: 'others',
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
label: 'Jordan Baker',
|
|
|
|
key: 'jordan baker'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Tom Buchanan',
|
|
|
|
key: 'tom buchanan'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: 'submenu',
|
|
|
|
label: 'Others',
|
|
|
|
key: 'others',
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
label: 'Chicken',
|
|
|
|
key: 'chicken'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'Beef',
|
|
|
|
key: 'beef'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
]
|
|
|
|
|
2019-12-03 20:00:29 +08:00
|
|
|
export default {
|
2020-01-27 17:09:09 +08:00
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
options
|
|
|
|
}
|
|
|
|
},
|
2019-12-03 20:00:29 +08:00
|
|
|
methods: {
|
|
|
|
handleSelect (name) {
|
|
|
|
this.$NMessage.info(name)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2019-10-22 13:48:51 +08:00
|
|
|
```
|