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

40 lines
808 B
Markdown
Raw Normal View History

2020-02-25 23:03:38 +08:00
# 多选节点
2020-12-12 14:44:44 +08:00
2020-02-25 23:03:38 +08:00
设置 `multiple` 来允许多选节点。
2020-12-12 14:44:44 +08:00
2020-02-25 23:03:38 +08:00
```html
2020-12-12 14:44:44 +08:00
<n-tree multiple block-node :data="data" />
2020-02-25 23:03:38 +08:00
<n-divider />
2020-12-12 14:44:44 +08:00
<n-tree multiple block-node :data="data" v-model:selected-keys="value" />
2020-02-25 23:03:38 +08:00
```
2020-12-12 14:44:44 +08:00
2020-02-25 23:03:38 +08:00
```js
2020-12-12 15:33:41 +08:00
function createData (level = 4, baseKey = '') {
2020-02-25 23:03:38 +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-02-25 23:03:38 +08:00
}
2020-12-12 15:33:41 +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 '三生万物'
}
export default {
2020-12-12 15:33:41 +08:00
data () {
2020-02-25 23:03:38 +08:00
return {
data: createData(),
value: []
}
}
}
2020-12-12 14:44:44 +08:00
```