mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-02 03:58:05 +08:00
add tree doc
This commit is contained in:
tjz
parent
7563a81642
commit
950365b3d2
@ -84,6 +84,7 @@ export default {
|
||||
},
|
||||
attrs: this.$attrs,
|
||||
on: {
|
||||
...this.$listeners,
|
||||
pressEnter: this.onSearch,
|
||||
},
|
||||
}
|
||||
|
||||
@ -101,7 +101,6 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| className | className of this column | string | - |
|
||||
| colSpan | Span of this column's title | number | |
|
||||
| dataIndex | Display field of the data record, could be set like `a.b.c` | string | - |
|
||||
| defaultSortOrder | Default order of sorted values: `'ascend'` `'descend'` `null` | string | - |
|
||||
|
||||
@ -35,7 +35,6 @@ const columns = [{
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| className | 列的 className | string | - |
|
||||
| bordered | 是否展示外边框和列边框 | boolean | false |
|
||||
| columns | 表格列的配置描述，具体项见下表 | array | - |
|
||||
| components | 覆盖默认的 table 元素 | object | - |
|
||||
|
||||
@ -15,11 +15,10 @@ basic controlled example
|
||||
@expand="onExpand"
|
||||
:expandedKeys="expandedKeys"
|
||||
:autoExpandParent="autoExpandParent"
|
||||
@check="onCheck"
|
||||
:checkedKeys="checkedKeys"
|
||||
v-model="checkedKeys"
|
||||
@select="onSelect"
|
||||
:selectedKeys="selectedKeys"
|
||||
:data="treeData"
|
||||
:treeNodes="treeData"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
@ -69,6 +68,11 @@ export default {
|
||||
treeData,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checkedKeys(val) {
|
||||
console.log('onCheck', val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onExpand (expandedKeys) {
|
||||
console.log('onExpand', arguments)
|
||||
|
||||
@ -12,7 +12,7 @@ The most basic usage, tell you how to use checkable, selectable, disabled, defau
|
||||
<template>
|
||||
<a-tree
|
||||
checkable
|
||||
:data="treeData"
|
||||
:treeNodes="treeData"
|
||||
:defaultExpandedKeys="['0-0-0', '0-0-1']"
|
||||
:defaultSelectedKeys="['0-0-0', '0-0-1']"
|
||||
:defaultCheckedKeys="['0-0-0', '0-0-1']"
|
||||
|
||||
@ -11,7 +11,7 @@ You can customize icons for different nodes.
|
||||
```html
|
||||
<template>
|
||||
<a-tree
|
||||
:data="treeData"
|
||||
:treeNodes="treeData"
|
||||
showIcon
|
||||
defaultExpandAll
|
||||
:defaultSelectedKeys="['0-0-0']"
|
||||
|
||||
@ -16,7 +16,7 @@ Drag treeNode to insert after the other treeNode or insert into the other parent
|
||||
draggable
|
||||
@dragenter="onDragEnter"
|
||||
@drop="onDrop"
|
||||
:data="gData"
|
||||
:treeNodes="gData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
||||
@ -10,9 +10,42 @@ To load data asynchronously when click to expand a treeNode.
|
||||
|
||||
```html
|
||||
<template>
|
||||
|
||||
<a-tree
|
||||
:loadData="onLoadData"
|
||||
:treeNodes="treeData"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
treeData: [
|
||||
{ title: 'Expand to load', key: '0' },
|
||||
{ title: 'Expand to load', key: '1' },
|
||||
{ title: 'Tree Node', key: '2', isLeaf: true },
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onLoadData (treeNode) {
|
||||
return new Promise((resolve) => {
|
||||
if (treeNode.dataRef.children) {
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
setTimeout(() => {
|
||||
treeNode.dataRef.children = [
|
||||
{ title: 'Child Node', key: `${treeNode.eventKey}-0` },
|
||||
{ title: 'Child Node', key: `${treeNode.eventKey}-1` },
|
||||
]
|
||||
this.treeData = [...this.treeData]
|
||||
resolve()
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
54
components/tree/demo/index.vue
Normal file
54
components/tree/demo/index.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<script>
|
||||
import BasicControlled from './basic-controlled'
|
||||
import Basic from './basic'
|
||||
import CustomizedIcon from './customized-icon'
|
||||
import Draggable from './draggable'
|
||||
import Dynamic from './dynamic'
|
||||
import Line from './line'
|
||||
import Search from './search'
|
||||
|
||||
import CN from '../index.zh-CN.md'
|
||||
import US from '../index.en-US.md'
|
||||
|
||||
const md = {
|
||||
cn: `# 树形控件
|
||||
## 何时使用
|
||||
|
||||
文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用\`树控件\`可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
|
||||
|
||||
## 代码演示`,
|
||||
us: `# Tree
|
||||
## When To Use
|
||||
|
||||
Almost anything can be represented in a tree structure.
|
||||
Examples include directories, organization hierarchies, biological classifications, countries, etc. The \`Tree\` component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a \`Tree\`.
|
||||
## Examples
|
||||
`,
|
||||
}
|
||||
export default {
|
||||
category: 'Components',
|
||||
type: 'Data Display',
|
||||
title: 'Tree',
|
||||
subtitle: '树形控件',
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<md cn={md.cn} us={md.us}/>
|
||||
<BasicControlled/>
|
||||
<Basic/>
|
||||
<CustomizedIcon/>
|
||||
<Draggable/>
|
||||
<Dynamic/>
|
||||
<Line/>
|
||||
<Search/>
|
||||
<api>
|
||||
<template slot='cn'>
|
||||
<CN/>
|
||||
</template>
|
||||
<US/>
|
||||
</api>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -10,9 +10,112 @@ Searchable Tree.
|
||||
|
||||
```html
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
|
||||
<a-tree
|
||||
@expand="onExpand"
|
||||
:expandedKeys="expandedKeys"
|
||||
:autoExpandParent="autoExpandParent"
|
||||
:treeNodes="gData"
|
||||
>
|
||||
<template slot="title" slot-scope="{key}">
|
||||
<span v-if="key.indexOf(searchValue) > -1">
|
||||
{{key.substr(0, key.indexOf(searchValue))}}
|
||||
<span style="color: #f50">{{searchValue}}</span>
|
||||
{{key.substr(key.indexOf(searchValue) + searchValue.length)}}
|
||||
</span>
|
||||
<span v-else>{{key}}</span>
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
<script>
|
||||
const x = 3
|
||||
const y = 2
|
||||
const z = 1
|
||||
const gData = []
|
||||
|
||||
const generateData = (_level, _preKey, _tns) => {
|
||||
const preKey = _preKey || '0'
|
||||
const tns = _tns || gData
|
||||
|
||||
const children = []
|
||||
for (let i = 0; i < x; i++) {
|
||||
const key = `${preKey}-${i}`
|
||||
tns.push({ key, scopedSlots: { title: 'title' }})
|
||||
if (i < y) {
|
||||
children.push(key)
|
||||
}
|
||||
}
|
||||
if (_level < 0) {
|
||||
return tns
|
||||
}
|
||||
const level = _level - 1
|
||||
children.forEach((key, index) => {
|
||||
tns[index].children = []
|
||||
return generateData(level, key, tns[index].children)
|
||||
})
|
||||
}
|
||||
generateData(z)
|
||||
|
||||
const dataList = []
|
||||
const generateList = (data) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const node = data[i]
|
||||
const key = node.key
|
||||
dataList.push({ key, title: key })
|
||||
if (node.children) {
|
||||
generateList(node.children, node.key)
|
||||
}
|
||||
}
|
||||
}
|
||||
generateList(gData)
|
||||
|
||||
const getParentKey = (key, tree) => {
|
||||
let parentKey
|
||||
for (let i = 0; i < tree.length; i++) {
|
||||
const node = tree[i]
|
||||
if (node.children) {
|
||||
if (node.children.some(item => item.key === key)) {
|
||||
parentKey = node.key
|
||||
} else if (getParentKey(key, node.children)) {
|
||||
parentKey = getParentKey(key, node.children)
|
||||
}
|
||||
}
|
||||
}
|
||||
return parentKey
|
||||
}
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
expandedKeys: [],
|
||||
searchValue: '',
|
||||
autoExpandParent: true,
|
||||
gData,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onExpand (expandedKeys) {
|
||||
this.expandedKeys = expandedKeys
|
||||
this.autoExpandParent = false
|
||||
},
|
||||
onChange (e) {
|
||||
const value = e.target.value
|
||||
const expandedKeys = dataList.map((item) => {
|
||||
if (item.key.indexOf(value) > -1) {
|
||||
return getParentKey(item.key, gData)
|
||||
}
|
||||
return null
|
||||
}).filter((item, i, self) => item && self.indexOf(item) === i)
|
||||
Object.assign(this, {
|
||||
expandedKeys,
|
||||
searchValue: value,
|
||||
autoExpandParent: true,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<a-tree
|
||||
:loadData="onLoadData"
|
||||
:data="treeData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
treeData: [
|
||||
{ title: 'Expand to load', key: '0' },
|
||||
{ title: 'Expand to load', key: '1' },
|
||||
{ title: 'Tree Node', key: '2', isLeaf: true },
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onLoadData (treeNode) {
|
||||
console.log(treeNode.dataRef)
|
||||
return new Promise((resolve) => {
|
||||
if (treeNode.dataRef.children) {
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
setTimeout(() => {
|
||||
treeNode.dataRef.children = [
|
||||
{ title: 'Child Node', key: `${treeNode.eventKey}-0` },
|
||||
{ title: 'Child Node', key: `${treeNode.eventKey}-1` },
|
||||
]
|
||||
this.treeData = [...this.treeData]
|
||||
resolve()
|
||||
}, 1000)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,12 +1,3 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Tree
|
||||
---
|
||||
|
||||
## When To Use
|
||||
|
||||
Almost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The `Tree` component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a `Tree`.
|
||||
|
||||
## API
|
||||
|
||||
@ -14,9 +5,10 @@ Almost anything can be represented in a tree structure. Examples include directo
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| treeNodes | treeNode of tree | array | - |
|
||||
| autoExpandParent | Whether to automatically expand a parent treeNode | boolean | true |
|
||||
| checkable | Adds a `Checkbox` before the treeNodes | boolean | false |
|
||||
| checkedKeys | (Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, its object has `checked` and `halfChecked` property. Regardless of whether the child or parent treeNode is checked, they won't impact each other. | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] |
|
||||
| checkedKeys(v-model) | (Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, its object has `checked` and `halfChecked` property. Regardless of whether the child or parent treeNode is checked, they won't impact each other. | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] |
|
||||
| checkStrictly | Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false |
|
||||
| defaultCheckedKeys | Specifies the keys of the default checked treeNodes | string\[] | \[] |
|
||||
| defaultExpandAll | Whether to expand all treeNodes by default | boolean | false |
|
||||
@ -25,46 +17,45 @@ Almost anything can be represented in a tree structure. Examples include directo
|
||||
| defaultSelectedKeys | Specifies the keys of the default selected treeNodes | string\[] | \[] |
|
||||
| disabled | whether disabled the tree | bool | false |
|
||||
| draggable | Specifies whether this Tree is draggable (IE > 8) | boolean | false |
|
||||
| expandedKeys | (Controlled) Specifies the keys of the expanded treeNodes | string\[] | \[] |
|
||||
| expandedKeys(.sync) | (Controlled) Specifies the keys of the expanded treeNodes | string\[] | \[] |
|
||||
| filterTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - |
|
||||
| loadData | Load data asynchronously | function(node) | - |
|
||||
| multiple | Allows selecting multiple treeNodes | boolean | false |
|
||||
| selectedKeys | (Controlled) Specifies the keys of the selected treeNodes | string\[] | - |
|
||||
| selectedKeys(.sync) | (Controlled) Specifies the keys of the selected treeNodes | string\[] | - |
|
||||
| showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false |
|
||||
| showLine | Shows a connecting line | boolean | false |
|
||||
| onCheck | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
|
||||
| onDragEnd | Callback function for when the onDragEnd event occurs | function({event, node}) | - |
|
||||
| onDragEnter | Callback function for when the onDragEnter event occurs | function({event, node, expandedKeys}) | - |
|
||||
| onDragLeave | Callback function for when the onDragLeave event occurs | function({event, node}) | - |
|
||||
| onDragOver | Callback function for when the onDragOver event occurs | function({event, node}) | - |
|
||||
| onDragStart | Callback function for when the onDragStart event occurs | function({event, node}) | - |
|
||||
| onDrop | Callback function for when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - |
|
||||
| onExpand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, {expanded: bool, node}) | - |
|
||||
| onRightClick | Callback function for when the user right clicks a treeNode | function({event, node}) | - |
|
||||
| onSelect | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
|
||||
|
||||
### Events
|
||||
| Events Name | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| check | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
|
||||
| dragEnd | Callback function for when the onDragEnd event occurs | function({event, node}) | - |
|
||||
| dragEnter | Callback function for when the onDragEnter event occurs | function({event, node, expandedKeys}) | - |
|
||||
| dragLeave | Callback function for when the onDragLeave event occurs | function({event, node}) | - |
|
||||
| dragOver | Callback function for when the onDragOver event occurs | function({event, node}) | - |
|
||||
| dragStart | Callback function for when the onDragStart event occurs | function({event, node}) | - |
|
||||
| drop | Callback function for when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - |
|
||||
| expand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, {expanded: bool, node}) | - |
|
||||
| rightClick | Callback function for when the user right clicks a treeNode | function({event, node}) | - |
|
||||
| select | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
|
||||
|
||||
### TreeNode props
|
||||
|
||||
|
||||
One of the Tree `treeNode` prop for describing the tree's node, TreeNode has the same API.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| class | className | string | - |
|
||||
| style | style | string\|object | - |
|
||||
| disableCheckbox | Disables the checkbox of the treeNode | boolean | false |
|
||||
| disabled | Disables the treeNode | boolean | false |
|
||||
| icon | customize icon. When you pass component, whose render will receive full TreeNode props as component props | element/Function(props):ReactNode | - |
|
||||
| icon | customize icon. When you pass component, whose render will receive full TreeNode props as component props | slot\|slot-scope | - |
|
||||
| isLeaf | Determines if this is a leaf node(effective when `loadData` is specified) | boolean | false |
|
||||
| key | Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: It must be unique in all of treeNodes of the tree! | string | internal calculated position of treeNode |
|
||||
| selectable | Set whether the treeNode can be selected | boolean | true |
|
||||
| title | Title | string\|ReactNode | '---' |
|
||||
| title | Title | string\|slot\|slot-scope | '---' |
|
||||
| slots | When using treeNodes, you can use this property to configure the properties that support the slot, such as `slots: { title: 'XXX'}` | object | - |
|
||||
| scopedSlots | When using treeNodes, you can use this property to configure the properties that support the slot-scope, such as `scopedSlots: { title: 'XXX'}` | object | - |
|
||||
| on | When using treeNodes, you can use this property to configure the events, such as `on: { click: () => {}}` | object | - |
|
||||
|
||||
## Note
|
||||
|
||||
Before `3.4.0`:
|
||||
The number of treeNodes can be very large, but when `checkable=true`,
|
||||
it will increase the compute time. So, we cache some calculations (e.g. `this.treeNodesStates`)
|
||||
to avoid double computing. But, this brings some restrictions.
|
||||
**When you load treeNodes asynchronously, you should render tree like this**:
|
||||
|
||||
```jsx
|
||||
{this.state.treeData.length
|
||||
? <Tree>{this.state.treeData.map(data => <TreeNode />)}</Tree>
|
||||
: 'loading tree'}
|
||||
```
|
||||
|
||||
@ -30,7 +30,7 @@ import { initDefaultProps, getOptionProps } from '../_util/props-util'
|
||||
// }
|
||||
|
||||
export const TreeProps = () => ({
|
||||
data: PropTypes.array,
|
||||
treeNodes: PropTypes.array,
|
||||
showLine: PropTypes.bool,
|
||||
/** 是否支持多选 */
|
||||
multiple: PropTypes.boolean,
|
||||
@ -127,7 +127,9 @@ export default {
|
||||
icon: restProps.icon ||
|
||||
$slots[slots.icon] ||
|
||||
($scopedSlots[scopedSlots.icon] && $scopedSlots[scopedSlots.icon]),
|
||||
title: restProps.title || $slots[slots.title],
|
||||
title: restProps.title ||
|
||||
$slots[slots.title] ||
|
||||
($scopedSlots[scopedSlots.title] && $scopedSlots[scopedSlots.title])(item),
|
||||
dataRef: item,
|
||||
},
|
||||
on,
|
||||
@ -149,7 +151,7 @@ export default {
|
||||
|
||||
render () {
|
||||
const props = getOptionProps(this)
|
||||
const { prefixCls, checkable, data, ...restProps } = props
|
||||
const { prefixCls, checkable, treeNodes, ...restProps } = props
|
||||
const { handelSelect, handleCheck, handleExpand, renderTreeNodes } = this
|
||||
const vcTreeProps = {
|
||||
props: {
|
||||
@ -166,7 +168,7 @@ export default {
|
||||
}
|
||||
return (
|
||||
<VcTree {...vcTreeProps}>
|
||||
{data ? renderTreeNodes(data) : this.$slots.default}
|
||||
{treeNodes ? renderTreeNodes(treeNodes) : this.$slots.default}
|
||||
</VcTree>
|
||||
)
|
||||
},
|
||||
|
||||
@ -1,13 +1,3 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Tree
|
||||
subtitle: 树形控件
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
|
||||
文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用`树控件`可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
|
||||
|
||||
## API
|
||||
|
||||
@ -15,9 +5,10 @@ subtitle: 树形控件
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| treeNodes | 节点的配置描述，具体项见下表 | array | -- |
|
||||
| autoExpandParent | 是否自动展开父节点 | boolean | true |
|
||||
| checkable | 节点前添加 Checkbox 复选框 | boolean | false |
|
||||
| checkedKeys | （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点key，则子节点自动选中；相应当子节点key都传入，父节点也自动选中。当设置`checkable`和`checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联 | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] |
|
||||
| checkedKeys(v-model) | （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点key，则子节点自动选中；相应当子节点key都传入，父节点也自动选中。当设置`checkable`和`checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联 | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] |
|
||||
| checkStrictly | checkable状态下节点选择完全受控（父子节点选中状态不再关联） | boolean | false |
|
||||
| defaultCheckedKeys | 默认选中复选框的树节点 | string\[] | \[] |
|
||||
| defaultExpandAll | 默认展开所有树节点 | boolean | false |
|
||||
@ -25,44 +16,49 @@ subtitle: 树形控件
|
||||
| defaultExpandParent | 默认展开父节点 | bool | true |
|
||||
| defaultSelectedKeys | 默认选中的树节点 | string\[] | \[] |
|
||||
| disabled | 将树禁用 | bool | false |
|
||||
| draggable | 设置节点可拖拽（IE>8） | boolean | false |
|
||||
| expandedKeys | （受控）展开指定的树节点 | string\[] | \[] |
|
||||
| draggable | 设置节点可拖拽 | boolean | false |
|
||||
| expandedKeys(.sync) | （受控）展开指定的树节点 | string\[] | \[] |
|
||||
| filterTreeNode | 按需筛选树节点（高亮），返回true | function(node) | - |
|
||||
| loadData | 异步加载数据 | function(node) | - |
|
||||
| multiple | 支持点选多个节点（节点本身） | boolean | false |
|
||||
| selectedKeys | （受控）设置选中的树节点 | string\[] | - |
|
||||
| selectedKeys(.sync) | （受控）设置选中的树节点 | string\[] | - |
|
||||
| showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |
|
||||
| showLine | 是否展示连接线 | boolean | false |
|
||||
| onCheck | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
|
||||
| onDragEnd | dragend 触发时调用 | function({event, node}) | - |
|
||||
| onDragEnter | dragenter 触发时调用 | function({event, node, expandedKeys}) | - |
|
||||
| onDragLeave | dragleave 触发时调用 | function({event, node}) | - |
|
||||
| onDragOver | dragover 触发时调用 | function({event, node}) | - |
|
||||
| onDragStart | 开始拖拽时调用 | function({event, node}) | - |
|
||||
| onDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - |
|
||||
| onExpand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) | - |
|
||||
| onRightClick | 响应右键点击 | function({event, node}) | - |
|
||||
| onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
|
||||
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| check | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
|
||||
| dragEnd | dragend 触发时调用 | function({event, node}) | - |
|
||||
| dragEnter | dragenter 触发时调用 | function({event, node, expandedKeys}) | - |
|
||||
| dragLeave | dragleave 触发时调用 | function({event, node}) | - |
|
||||
| dragOver | dragover 触发时调用 | function({event, node}) | - |
|
||||
| dragStart | 开始拖拽时调用 | function({event, node}) | - |
|
||||
| drop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - |
|
||||
| expand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) | - |
|
||||
| rightClick | 响应右键点击 | function({event, node}) | - |
|
||||
| select | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
|
||||
|
||||
### TreeNode props
|
||||
|
||||
结点描述数据对象，是 treeNodes 中的一项，TreeNode 使用相同的 API。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| class | 节点的 class | string | - |
|
||||
| style | 节点的 style | string\|object | - |
|
||||
| disableCheckbox | 禁掉 checkbox | boolean | false |
|
||||
| disabled | 禁掉响应 | boolean | false |
|
||||
| icon | 自定义图标。可接收组件，props 为当前节点 props | element/Function(props):ReactNode | - |
|
||||
| icon | 自定义图标。可接收组件，props 为当前节点 props | slot\|slot-scope | - |
|
||||
| isLeaf | 设置为叶子节点(设置了`loadData`时有效) | boolean | false |
|
||||
| key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！ | string | 内部计算出的节点位置 |
|
||||
| selectable | 设置节点是否可被选中 | boolean | true |
|
||||
| title | 标题 | string\|ReactNode | '---' |
|
||||
| title | 标题 | string\|slot\|slot-scope | '---' |
|
||||
| slots | 使用treeNodes时，可以通过该属性配置支持slot的属性，如 `slots: { title: 'XXX'}` | object | - |
|
||||
| scopedSlots | 使用columns时，可以通过该属性配置支持slot-scope的属性，如 `scopedSlots: { title: 'XXX'}` | object | - |
|
||||
| on | 事件对象，仅在treeNodes使用方式中生效，如`{click: () => {}}` | object | '---' |
|
||||
|
||||
## 注意
|
||||
|
||||
在 `3.4.0` 之前：
|
||||
树节点可以有很多，但在设置`checkable`时，将会花费更多的计算时间，因此我们缓存了一些计算结果（`this.treeNodesStates`）来复用，避免多次重复计算，以此提高性能。但这也带来了一些限制，当你异步加载树节点时，你需要这样渲染树：
|
||||
|
||||
```jsx
|
||||
{this.state.treeData.length
|
||||
? <Tree>{this.state.treeData.map(data => <TreeNode />)}</Tree>
|
||||
: 'loading tree'}
|
||||
```
|
||||
|
||||
@ -42,3 +42,4 @@ export { default as table } from 'antd/table/demo/index.vue'
|
||||
export { default as inputNumber } from 'antd/input-number/demo/index.vue'
|
||||
export { default as transfer } from 'antd/transfer/demo/index.vue'
|
||||
export { default as upload } from 'antd/upload/demo/index.vue'
|
||||
export { default as tree } from 'antd/tree/demo/index.vue'
|
||||
|
||||
@ -3,7 +3,7 @@ import Layout from './components/layout.vue'
|
||||
const AsyncTestComp = () => {
|
||||
const d = window.location.hash.replace('#', '')
|
||||
return {
|
||||
component: import(`../components/slider/demo/${d}`),
|
||||
component: import(`../components/tree/demo/${d}`),
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user