naive-ui/demo/documentation/components/tree/zhCN/basic.md

41 lines
810 B
Markdown
Raw Normal View History

2020-02-25 23:03:38 +08:00
# 基础用法
好在这颗树不是活的,也不平衡。
2020-02-25 18:48:29 +08:00
```html
<n-tree
block-node
:data="data"
2020-02-25 23:03:38 +08:00
:default-expanded-keys="defaultExpandedKeys"
2020-02-25 18:48:29 +08:00
/>
```
```js
2020-02-25 23:03:38 +08:00
function createData (level = 4, baseKey = '') {
2020-02-25 18:48:29 +08:00
if (!level) return undefined
return Array
2020-02-25 23:03:38 +08:00
.apply(null, { length: 6 - level })
2020-02-25 18:48:29 +08:00
.map((_, index) => {
const key = '' + baseKey + level + index
return {
2020-02-25 23:03:38 +08:00
label: createLabel(level),
2020-02-25 18:48:29 +08:00
key,
2020-02-25 23:03:38 +08:00
children: createData(level - 1, key)
2020-02-25 18:48:29 +08:00
}
})
}
function createLabel (level) {
2020-02-25 23:03:38 +08:00
if (level === 4) return '道生一'
if (level === 3) return '一生二'
if (level === 2) return '二生三'
if (level === 1) return '三生万物'
2020-02-25 18:48:29 +08:00
}
export default {
data () {
return {
data: createData(),
2020-02-25 23:03:38 +08:00
defaultExpandedKeys: ['40', '41']
2020-02-25 18:48:29 +08:00
}
}
}
```