2020-11-13 17:02:30 +08:00
|
|
|
# 级联选择
|
2020-12-12 14:44:44 +08:00
|
|
|
|
2020-11-13 17:02:30 +08:00
|
|
|
```html
|
|
|
|
<n-tree
|
|
|
|
block-node
|
|
|
|
cascade
|
|
|
|
checkable
|
|
|
|
:data="data"
|
|
|
|
:default-expanded-keys="defaultExpandedKeys"
|
|
|
|
/>
|
|
|
|
```
|
|
|
|
|
2020-12-12 14:44:44 +08:00
|
|
|
```js
|
2020-12-12 15:33:41 +08:00
|
|
|
function createData (level = 4, baseKey = '') {
|
2020-11-13 17:02:30 +08:00
|
|
|
if (!level) return undefined
|
2020-12-12 14:44:44 +08:00
|
|
|
return Array.apply(null, { length: 6 - level }).map((_, index) => {
|
|
|
|
const key = '' + baseKey + level + index
|
|
|
|
return {
|
|
|
|
label: createLabel(level),
|
|
|
|
key,
|
|
|
|
children: createData(level - 1, key)
|
|
|
|
}
|
|
|
|
})
|
2020-11-13 17:02:30 +08:00
|
|
|
}
|
|
|
|
|
2020-12-12 15:33:41 +08:00
|
|
|
function createLabel (level) {
|
2020-11-13 17:02:30 +08:00
|
|
|
if (level === 4) return '道生一'
|
|
|
|
if (level === 3) return '一生二'
|
|
|
|
if (level === 2) return '二生三'
|
|
|
|
if (level === 1) return '三生万物'
|
|
|
|
}
|
|
|
|
|
|
|
|
export default {
|
2020-12-12 15:33:41 +08:00
|
|
|
data () {
|
2020-11-13 17:02:30 +08:00
|
|
|
return {
|
|
|
|
data: createData(),
|
|
|
|
defaultExpandedKeys: ['40', '41']
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-12-12 14:44:44 +08:00
|
|
|
```
|