mirror of https://github.com/ElemeFE/element
Tree: add indent, update docs
Leopoldthecoder
杨奕
parent
8e34408d6e
commit
7391c488a0
|
|
@ -608,6 +608,7 @@ Search data from server-side.
|
||||||
|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean/object | — | false |
|
|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean/object | — | false |
|
||||||
|auto-complete | same as `auto-complete` in native input | string | on/off | off |
|
|auto-complete | same as `auto-complete` in native input | string | on/off | off |
|
||||||
|name | same as `name` in native input | string | — | — |
|
|name | same as `name` in native input | string | — | — |
|
||||||
|
| readonly | same as `readonly` in native input | boolean | — | false |
|
||||||
|max | same as `max` in native input | * | — | — |
|
|max | same as `max` in native input | * | — | — |
|
||||||
|min | same as `min` in native input | * | — | — |
|
|min | same as `min` in native input | * | — | — |
|
||||||
|resize| control the resizability | string | none, both, horizontal, vertical | — |
|
|resize| control the resizability | string | none, both, horizontal, vertical | — |
|
||||||
|
|
|
||||||
|
|
@ -35,6 +35,44 @@
|
||||||
}]
|
}]
|
||||||
}];
|
}];
|
||||||
|
|
||||||
|
const data2 = [{
|
||||||
|
id: 1,
|
||||||
|
label: 'Level one 1',
|
||||||
|
children: [{
|
||||||
|
id: 4,
|
||||||
|
label: 'Level two 1-1',
|
||||||
|
children: [{
|
||||||
|
id: 9,
|
||||||
|
label: 'Level three 1-1-1'
|
||||||
|
}, {
|
||||||
|
id: 10,
|
||||||
|
label: 'Level three 1-1-2'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
label: 'Level one 2',
|
||||||
|
children: [{
|
||||||
|
id: 5,
|
||||||
|
label: 'Level two 2-1'
|
||||||
|
}, {
|
||||||
|
id: 6,
|
||||||
|
label: 'Level two 2-2'
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
label: 'Level one 3',
|
||||||
|
children: [{
|
||||||
|
id: 7,
|
||||||
|
label: 'Level two 3-1'
|
||||||
|
}, {
|
||||||
|
id: 8,
|
||||||
|
label: 'Level two 3-2'
|
||||||
|
}]
|
||||||
|
}];
|
||||||
|
|
||||||
|
let id = 1000;
|
||||||
|
|
||||||
const regions = [{
|
const regions = [{
|
||||||
'name': 'region1'
|
'name': 'region1'
|
||||||
}, {
|
}, {
|
||||||
|
|
@ -48,12 +86,18 @@
|
||||||
children: 'zones'
|
children: 'zones'
|
||||||
};
|
};
|
||||||
|
|
||||||
var defaultProps = {
|
const defaultProps = {
|
||||||
children: 'children',
|
children: 'children',
|
||||||
label: 'label'
|
label: 'label'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
watch: {
|
||||||
|
filterText(val) {
|
||||||
|
this.$refs.tree2.filter(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
handleCheckChange(data, checked, indeterminate) {
|
handleCheckChange(data, checked, indeterminate) {
|
||||||
console.log(data, checked, indeterminate);
|
console.log(data, checked, indeterminate);
|
||||||
|
|
@ -89,15 +133,68 @@
|
||||||
|
|
||||||
resolve(data);
|
resolve(data);
|
||||||
}, 500);
|
}, 500);
|
||||||
|
},
|
||||||
|
getCheckedNodes() {
|
||||||
|
console.log(this.$refs.tree.getCheckedNodes());
|
||||||
|
},
|
||||||
|
getCheckedKeys() {
|
||||||
|
console.log(this.$refs.tree.getCheckedKeys());
|
||||||
|
},
|
||||||
|
setCheckedNodes() {
|
||||||
|
this.$refs.tree.setCheckedNodes([
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
label: '二级 2-1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
label: '三级 1-1-1'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
setCheckedKeys() {
|
||||||
|
this.$refs.tree.setCheckedKeys([8]);
|
||||||
|
},
|
||||||
|
resetChecked() {
|
||||||
|
this.$refs.tree.setCheckedKeys([]);
|
||||||
|
},
|
||||||
|
append(store, data) {
|
||||||
|
store.append({ id: id++, label: 'testtest', children: [] }, data);
|
||||||
|
},
|
||||||
|
|
||||||
|
remove(store, data) {
|
||||||
|
store.remove(data);
|
||||||
|
},
|
||||||
|
|
||||||
|
renderContent(h, { node, data, store }) {
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
<span>
|
||||||
|
<span>{node.label}</span>
|
||||||
|
</span>
|
||||||
|
<span style="float: right; margin-right: 20px">
|
||||||
|
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
|
||||||
|
<el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
|
||||||
|
</span>
|
||||||
|
</span>);
|
||||||
|
},
|
||||||
|
|
||||||
|
filterNode(value, data) {
|
||||||
|
if (!value) return true;
|
||||||
|
return data.label.indexOf(value) !== -1;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
data,
|
data,
|
||||||
|
data2,
|
||||||
regions,
|
regions,
|
||||||
defaultProps,
|
defaultProps,
|
||||||
props
|
props,
|
||||||
|
defaultCheckedKeys: [5],
|
||||||
|
defaultExpandedKeys: [2, 3],
|
||||||
|
filterText: ''
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -244,13 +341,351 @@ Used for node selection. In the following example, data for each layer is acquir
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
### Default expanded and default checked
|
||||||
|
Tree nodes can be initially expanded or checked
|
||||||
|
|
||||||
|
::: demo Use `default-expanded-keys` and `default-checked-keys` to set initially expanded and initially checked nodes respectively. Note that for them to work, `node-key` is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.
|
||||||
|
```html
|
||||||
|
<el-tree
|
||||||
|
:data="data2"
|
||||||
|
show-checkbox
|
||||||
|
node-key="id"
|
||||||
|
:default-expanded-keys="[2, 3]"
|
||||||
|
:default-checked-keys="[5]"
|
||||||
|
:props="defaultProps">
|
||||||
|
</el-tree>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
data2: [{
|
||||||
|
id: 1,
|
||||||
|
label: 'Level one 1',
|
||||||
|
children: [{
|
||||||
|
id: 4,
|
||||||
|
label: 'Level two 1-1',
|
||||||
|
children: [{
|
||||||
|
id: 9,
|
||||||
|
label: 'Level three 1-1-1'
|
||||||
|
}, {
|
||||||
|
id: 10,
|
||||||
|
label: 'Level three 1-1-2'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
label: 'Level one 2',
|
||||||
|
children: [{
|
||||||
|
id: 5,
|
||||||
|
label: 'Level two 2-1'
|
||||||
|
}, {
|
||||||
|
id: 6,
|
||||||
|
label: 'Level two 2-2'
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
label: 'Level one 3',
|
||||||
|
children: [{
|
||||||
|
id: 7,
|
||||||
|
label: 'Level two 3-1'
|
||||||
|
}, {
|
||||||
|
id: 8,
|
||||||
|
label: 'Level two 3-2'
|
||||||
|
}]
|
||||||
|
}],
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'label'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Checking tree nodes
|
||||||
|
|
||||||
|
::: demo This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, `node-key` is required.
|
||||||
|
```html
|
||||||
|
<el-tree
|
||||||
|
:data="data2"
|
||||||
|
show-checkbox
|
||||||
|
default-expand-all
|
||||||
|
node-key="id"
|
||||||
|
ref="tree"
|
||||||
|
highlight-current
|
||||||
|
:props="defaultProps">
|
||||||
|
</el-tree>
|
||||||
|
|
||||||
|
<div class="buttons">
|
||||||
|
<el-button @click="getCheckedNodes">get by node</el-button>
|
||||||
|
<el-button @click="getCheckedKeys">get by key</el-button>
|
||||||
|
<el-button @click="setCheckedNodes">set by node</el-button>
|
||||||
|
<el-button @click="setCheckedKeys">set by key</el-button>
|
||||||
|
<el-button @click="resetChecked">reset</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
getCheckedNodes() {
|
||||||
|
console.log(this.$refs.tree.getCheckedNodes());
|
||||||
|
},
|
||||||
|
getCheckedKeys() {
|
||||||
|
console.log(this.$refs.tree.getCheckedKeys());
|
||||||
|
},
|
||||||
|
setCheckedNodes() {
|
||||||
|
this.$refs.tree.setCheckedNodes([{
|
||||||
|
id: 5,
|
||||||
|
label: 'Level two 2-1'
|
||||||
|
}, {
|
||||||
|
id: 9,
|
||||||
|
label: 'Level three 1-1-1'
|
||||||
|
}]);
|
||||||
|
},
|
||||||
|
setCheckedKeys() {
|
||||||
|
this.$refs.tree.setCheckedKeys([8]);
|
||||||
|
},
|
||||||
|
resetChecked() {
|
||||||
|
this.$refs.tree.setCheckedKeys([]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
data2: [{
|
||||||
|
id: 1,
|
||||||
|
label: 'Level one 1',
|
||||||
|
children: [{
|
||||||
|
id: 4,
|
||||||
|
label: 'Level two 1-1',
|
||||||
|
children: [{
|
||||||
|
id: 9,
|
||||||
|
label: 'Level three 1-1-1'
|
||||||
|
}, {
|
||||||
|
id: 10,
|
||||||
|
label: 'Level three 1-1-2'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
label: 'Level one 2',
|
||||||
|
children: [{
|
||||||
|
id: 5,
|
||||||
|
label: 'Level two 2-1'
|
||||||
|
}, {
|
||||||
|
id: 6,
|
||||||
|
label: 'Level two 2-2'
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
label: 'Level one 3',
|
||||||
|
children: [{
|
||||||
|
id: 7,
|
||||||
|
label: 'Level two 3-1'
|
||||||
|
}, {
|
||||||
|
id: 8,
|
||||||
|
label: 'Level two 3-2'
|
||||||
|
}]
|
||||||
|
}],
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'label'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Custom node content
|
||||||
|
The content of tree nodes can be customized, so you can add icons or buttons as you will
|
||||||
|
|
||||||
|
::: demo Use `render-content` to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions.
|
||||||
|
```html
|
||||||
|
<el-tree
|
||||||
|
:data="data2"
|
||||||
|
:props="defaultProps"
|
||||||
|
show-checkbox
|
||||||
|
node-key="id"
|
||||||
|
default-expand-all
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
:render-content="renderContent">
|
||||||
|
</el-tree>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let id = 1000;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
data2: [{
|
||||||
|
id: 1,
|
||||||
|
label: 'Level one 1',
|
||||||
|
children: [{
|
||||||
|
id: 4,
|
||||||
|
label: 'Level two 1-1',
|
||||||
|
children: [{
|
||||||
|
id: 9,
|
||||||
|
label: 'Level three 1-1-1'
|
||||||
|
}, {
|
||||||
|
id: 10,
|
||||||
|
label: 'Level three 1-1-2'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
label: 'Level one 2',
|
||||||
|
children: [{
|
||||||
|
id: 5,
|
||||||
|
label: 'Level two 2-1'
|
||||||
|
}, {
|
||||||
|
id: 6,
|
||||||
|
label: 'Level two 2-2'
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
label: 'Level one 3',
|
||||||
|
children: [{
|
||||||
|
id: 7,
|
||||||
|
label: 'Level two 3-1'
|
||||||
|
}, {
|
||||||
|
id: 8,
|
||||||
|
label: 'Level two 3-2'
|
||||||
|
}]
|
||||||
|
}],
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'label'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
append(store, data) {
|
||||||
|
store.append({ id: id++, label: 'testtest', children: [] }, data);
|
||||||
|
},
|
||||||
|
|
||||||
|
remove(store, data) {
|
||||||
|
store.remove(data);
|
||||||
|
},
|
||||||
|
|
||||||
|
renderContent(h, { node, data, store }) {
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
<span>
|
||||||
|
<span>{node.label}</span>
|
||||||
|
</span>
|
||||||
|
<span style="float: right; margin-right: 20px">
|
||||||
|
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
|
||||||
|
<el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
|
||||||
|
</span>
|
||||||
|
</span>);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Tree node filtering
|
||||||
|
Tree nodes can be filtered
|
||||||
|
|
||||||
|
::: demo Invoke the `filter` method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, `filter-node-method` is required, and its value is the filtering method.
|
||||||
|
```html
|
||||||
|
<el-input
|
||||||
|
placeholder="Filter keyword"
|
||||||
|
v-model="filterText">
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
<el-tree
|
||||||
|
class="filter-tree"
|
||||||
|
:data="data2"
|
||||||
|
:props="defaultProps"
|
||||||
|
default-expand-all
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
ref="tree2">
|
||||||
|
</el-tree>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
watch: {
|
||||||
|
filterText(val) {
|
||||||
|
this.$refs.tree2.filter(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
filterNode(value, data) {
|
||||||
|
if (!value) return true;
|
||||||
|
return data.label.indexOf(value) !== -1;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
filterText: '',
|
||||||
|
data2: [{
|
||||||
|
id: 1,
|
||||||
|
label: 'Level one 1',
|
||||||
|
children: [{
|
||||||
|
id: 4,
|
||||||
|
label: 'Level two 1-1',
|
||||||
|
children: [{
|
||||||
|
id: 9,
|
||||||
|
label: 'Level three 1-1-1'
|
||||||
|
}, {
|
||||||
|
id: 10,
|
||||||
|
label: 'Level three 1-1-2'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
label: 'Level one 2',
|
||||||
|
children: [{
|
||||||
|
id: 5,
|
||||||
|
label: 'Level two 2-1'
|
||||||
|
}, {
|
||||||
|
id: 6,
|
||||||
|
label: 'Level two 2-2'
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
label: 'Level one 3',
|
||||||
|
children: [{
|
||||||
|
id: 7,
|
||||||
|
label: 'Level two 3-1'
|
||||||
|
}, {
|
||||||
|
id: 8,
|
||||||
|
label: 'Level two 3-2'
|
||||||
|
}]
|
||||||
|
}],
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'label'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
### Accordion
|
### Accordion
|
||||||
|
|
||||||
Only one node among the same level can be expanded at one time.
|
Only one node among the same level can be expanded at one time.
|
||||||
|
|
||||||
::: demo
|
::: demo
|
||||||
```html
|
```html
|
||||||
<el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick"></el-tree>
|
<el-tree
|
||||||
|
:data="data"
|
||||||
|
:props="defaultProps"
|
||||||
|
accordion
|
||||||
|
@node-click="handleNodeClick">
|
||||||
|
</el-tree>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -327,6 +762,7 @@ Only one node among the same level can be expanded at one time.
|
||||||
| default-checked-keys | array of keys of initially checked nodes | array | — | — |
|
| default-checked-keys | array of keys of initially checked nodes | array | — | — |
|
||||||
| filter-node-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | — | — |
|
| filter-node-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | — | — |
|
||||||
| accordion | whether only one node among the same level can be expanded at one time | boolean | — | false |
|
| accordion | whether only one node among the same level can be expanded at one time | boolean | — | false |
|
||||||
|
| indent | horizontal indentation of nodes in adjacent levels in pixels | number | — | 16 |
|
||||||
|
|
||||||
### props
|
### props
|
||||||
| Attribute | Description | Type | Accepted Values | Default |
|
| Attribute | Description | Type | Accepted Values | Default |
|
||||||
|
|
|
||||||
|
|
@ -765,6 +765,7 @@ export default {
|
||||||
| autosize | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean/object | — | false |
|
| autosize | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean/object | — | false |
|
||||||
| auto-complete | 原生属性，自动补全 | string | on, off | off |
|
| auto-complete | 原生属性，自动补全 | string | on, off | off |
|
||||||
| name | 原生属性 | string | — | — |
|
| name | 原生属性 | string | — | — |
|
||||||
|
| readonly | 原生属性，是否只读 | boolean | — | false |
|
||||||
| max | 原生属性，设置最大值 | * | — | — |
|
| max | 原生属性，设置最大值 | * | — | — |
|
||||||
| min | 原生属性，设置最小值 | * | — | — |
|
| min | 原生属性，设置最小值 | * | — | — |
|
||||||
| resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |
|
| resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,22 @@
|
||||||
<style>
|
<style>
|
||||||
.leaf {
|
.demo-tree {
|
||||||
width: 20px;
|
.leaf {
|
||||||
background: #ddd;
|
width: 20px;
|
||||||
}
|
background: #ddd;
|
||||||
|
}
|
||||||
.folder {
|
|
||||||
width: 20px;
|
.folder {
|
||||||
background: #888;
|
width: 20px;
|
||||||
|
background: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-tree {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
@ -47,6 +57,44 @@
|
||||||
}]
|
}]
|
||||||
}];
|
}];
|
||||||
|
|
||||||
|
const data2 = [{
|
||||||
|
id: 1,
|
||||||
|
label: '一级 1',
|
||||||
|
children: [{
|
||||||
|
id: 4,
|
||||||
|
label: '二级 1-1',
|
||||||
|
children: [{
|
||||||
|
id: 9,
|
||||||
|
label: '三级 1-1-1'
|
||||||
|
}, {
|
||||||
|
id: 10,
|
||||||
|
label: '三级 1-1-2'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
label: '一级 2',
|
||||||
|
children: [{
|
||||||
|
id: 5,
|
||||||
|
label: '二级 2-1'
|
||||||
|
}, {
|
||||||
|
id: 6,
|
||||||
|
label: '二级 2-2'
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
label: '一级 3',
|
||||||
|
children: [{
|
||||||
|
id: 7,
|
||||||
|
label: '二级 3-1'
|
||||||
|
}, {
|
||||||
|
id: 8,
|
||||||
|
label: '二级 3-2'
|
||||||
|
}]
|
||||||
|
}];
|
||||||
|
|
||||||
|
let id = 1000;
|
||||||
|
|
||||||
const regions = [{
|
const regions = [{
|
||||||
'name': 'region1'
|
'name': 'region1'
|
||||||
}, {
|
}, {
|
||||||
|
|
@ -60,12 +108,18 @@
|
||||||
children: 'zones'
|
children: 'zones'
|
||||||
};
|
};
|
||||||
|
|
||||||
var defaultProps = {
|
const defaultProps = {
|
||||||
children: 'children',
|
children: 'children',
|
||||||
label: 'label'
|
label: 'label'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
watch: {
|
||||||
|
filterText(val) {
|
||||||
|
this.$refs.tree2.filter(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
handleCheckChange(data, checked, indeterminate) {
|
handleCheckChange(data, checked, indeterminate) {
|
||||||
console.log(data, checked, indeterminate);
|
console.log(data, checked, indeterminate);
|
||||||
|
|
@ -101,15 +155,68 @@
|
||||||
|
|
||||||
resolve(data);
|
resolve(data);
|
||||||
}, 500);
|
}, 500);
|
||||||
|
},
|
||||||
|
getCheckedNodes() {
|
||||||
|
console.log(this.$refs.tree.getCheckedNodes());
|
||||||
|
},
|
||||||
|
getCheckedKeys() {
|
||||||
|
console.log(this.$refs.tree.getCheckedKeys());
|
||||||
|
},
|
||||||
|
setCheckedNodes() {
|
||||||
|
this.$refs.tree.setCheckedNodes([
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
label: '二级 2-1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
label: '三级 1-1-1'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
setCheckedKeys() {
|
||||||
|
this.$refs.tree.setCheckedKeys([8]);
|
||||||
|
},
|
||||||
|
resetChecked() {
|
||||||
|
this.$refs.tree.setCheckedKeys([]);
|
||||||
|
},
|
||||||
|
append(store, data) {
|
||||||
|
store.append({ id: id++, label: 'testtest', children: [] }, data);
|
||||||
|
},
|
||||||
|
|
||||||
|
remove(store, data) {
|
||||||
|
store.remove(data);
|
||||||
|
},
|
||||||
|
|
||||||
|
renderContent(h, { node, data, store }) {
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
<span>
|
||||||
|
<span>{node.label}</span>
|
||||||
|
</span>
|
||||||
|
<span style="float: right; margin-right: 20px">
|
||||||
|
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
|
||||||
|
<el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
|
||||||
|
</span>
|
||||||
|
</span>);
|
||||||
|
},
|
||||||
|
|
||||||
|
filterNode(value, data) {
|
||||||
|
if (!value) return true;
|
||||||
|
return data.label.indexOf(value) !== -1;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
data,
|
data,
|
||||||
|
data2,
|
||||||
regions,
|
regions,
|
||||||
defaultProps,
|
defaultProps,
|
||||||
props
|
props,
|
||||||
|
defaultCheckedKeys: [5],
|
||||||
|
defaultExpandedKeys: [2, 3],
|
||||||
|
filterText: ''
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -256,13 +363,351 @@
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
### 默认展开和默认选中
|
||||||
|
可将 Tree 的某些节点设置为默认展开或默认选中
|
||||||
|
|
||||||
|
::: demo 分别通过`default-expanded-keys`和`default-checked-keys`设置默认展开和默认选中的节点。需要注意的是，此时必须设置`node-key`，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
|
||||||
|
```html
|
||||||
|
<el-tree
|
||||||
|
:data="data2"
|
||||||
|
show-checkbox
|
||||||
|
node-key="id"
|
||||||
|
:default-expanded-keys="[2, 3]"
|
||||||
|
:default-checked-keys="[5]"
|
||||||
|
:props="defaultProps">
|
||||||
|
</el-tree>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
data2: [{
|
||||||
|
id: 1,
|
||||||
|
label: '一级 1',
|
||||||
|
children: [{
|
||||||
|
id: 4,
|
||||||
|
label: '二级 1-1',
|
||||||
|
children: [{
|
||||||
|
id: 9,
|
||||||
|
label: '三级 1-1-1'
|
||||||
|
}, {
|
||||||
|
id: 10,
|
||||||
|
label: '三级 1-1-2'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
label: '一级 2',
|
||||||
|
children: [{
|
||||||
|
id: 5,
|
||||||
|
label: '二级 2-1'
|
||||||
|
}, {
|
||||||
|
id: 6,
|
||||||
|
label: '二级 2-2'
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
label: '一级 3',
|
||||||
|
children: [{
|
||||||
|
id: 7,
|
||||||
|
label: '二级 3-1'
|
||||||
|
}, {
|
||||||
|
id: 8,
|
||||||
|
label: '二级 3-2'
|
||||||
|
}]
|
||||||
|
}],
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'label'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 树节点的选择
|
||||||
|
|
||||||
|
::: demo 本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置`node-key`。
|
||||||
|
```html
|
||||||
|
<el-tree
|
||||||
|
:data="data2"
|
||||||
|
show-checkbox
|
||||||
|
default-expand-all
|
||||||
|
node-key="id"
|
||||||
|
ref="tree"
|
||||||
|
highlight-current
|
||||||
|
:props="defaultProps">
|
||||||
|
</el-tree>
|
||||||
|
|
||||||
|
<div class="buttons">
|
||||||
|
<el-button @click="getCheckedNodes">通过 node 获取</el-button>
|
||||||
|
<el-button @click="getCheckedKeys">通过 key 获取</el-button>
|
||||||
|
<el-button @click="setCheckedNodes">通过 node 设置</el-button>
|
||||||
|
<el-button @click="setCheckedKeys">通过 key 设置</el-button>
|
||||||
|
<el-button @click="resetChecked">清空</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
getCheckedNodes() {
|
||||||
|
console.log(this.$refs.tree.getCheckedNodes());
|
||||||
|
},
|
||||||
|
getCheckedKeys() {
|
||||||
|
console.log(this.$refs.tree.getCheckedKeys());
|
||||||
|
},
|
||||||
|
setCheckedNodes() {
|
||||||
|
this.$refs.tree.setCheckedNodes([{
|
||||||
|
id: 5,
|
||||||
|
label: '二级 2-1'
|
||||||
|
}, {
|
||||||
|
id: 9,
|
||||||
|
label: '三级 1-1-1'
|
||||||
|
}]);
|
||||||
|
},
|
||||||
|
setCheckedKeys() {
|
||||||
|
this.$refs.tree.setCheckedKeys([8]);
|
||||||
|
},
|
||||||
|
resetChecked() {
|
||||||
|
this.$refs.tree.setCheckedKeys([]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
data2: [{
|
||||||
|
id: 1,
|
||||||
|
label: '一级 1',
|
||||||
|
children: [{
|
||||||
|
id: 4,
|
||||||
|
label: '二级 1-1',
|
||||||
|
children: [{
|
||||||
|
id: 9,
|
||||||
|
label: '三级 1-1-1'
|
||||||
|
}, {
|
||||||
|
id: 10,
|
||||||
|
label: '三级 1-1-2'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
label: '一级 2',
|
||||||
|
children: [{
|
||||||
|
id: 5,
|
||||||
|
label: '二级 2-1'
|
||||||
|
}, {
|
||||||
|
id: 6,
|
||||||
|
label: '二级 2-2'
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
label: '一级 3',
|
||||||
|
children: [{
|
||||||
|
id: 7,
|
||||||
|
label: '二级 3-1'
|
||||||
|
}, {
|
||||||
|
id: 8,
|
||||||
|
label: '二级 3-2'
|
||||||
|
}]
|
||||||
|
}],
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'label'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 自定义节点内容
|
||||||
|
节点的内容支持自定义，可以在节点区添加按钮或图标等内容
|
||||||
|
|
||||||
|
::: demo 使用`render-content`指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。
|
||||||
|
```html
|
||||||
|
<el-tree
|
||||||
|
:data="data2"
|
||||||
|
:props="defaultProps"
|
||||||
|
show-checkbox
|
||||||
|
node-key="id"
|
||||||
|
default-expand-all
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
:render-content="renderContent">
|
||||||
|
</el-tree>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let id = 1000;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
data2: [{
|
||||||
|
id: 1,
|
||||||
|
label: '一级 1',
|
||||||
|
children: [{
|
||||||
|
id: 4,
|
||||||
|
label: '二级 1-1',
|
||||||
|
children: [{
|
||||||
|
id: 9,
|
||||||
|
label: '三级 1-1-1'
|
||||||
|
}, {
|
||||||
|
id: 10,
|
||||||
|
label: '三级 1-1-2'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
label: '一级 2',
|
||||||
|
children: [{
|
||||||
|
id: 5,
|
||||||
|
label: '二级 2-1'
|
||||||
|
}, {
|
||||||
|
id: 6,
|
||||||
|
label: '二级 2-2'
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
label: '一级 3',
|
||||||
|
children: [{
|
||||||
|
id: 7,
|
||||||
|
label: '二级 3-1'
|
||||||
|
}, {
|
||||||
|
id: 8,
|
||||||
|
label: '二级 3-2'
|
||||||
|
}]
|
||||||
|
}],
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'label'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
append(store, data) {
|
||||||
|
store.append({ id: id++, label: 'testtest', children: [] }, data);
|
||||||
|
},
|
||||||
|
|
||||||
|
remove(store, data) {
|
||||||
|
store.remove(data);
|
||||||
|
},
|
||||||
|
|
||||||
|
renderContent(h, { node, data, store }) {
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
<span>
|
||||||
|
<span>{node.label}</span>
|
||||||
|
</span>
|
||||||
|
<span style="float: right; margin-right: 20px">
|
||||||
|
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
|
||||||
|
<el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
|
||||||
|
</span>
|
||||||
|
</span>);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 节点过滤
|
||||||
|
通过关键字过滤树节点
|
||||||
|
|
||||||
|
::: demo 在需要对节点进行过滤时，调用 Tree 实例的`filter`方法，参数为关键字。需要注意的是，此时需要设置`filter-node-method`，值为过滤函数。
|
||||||
|
```html
|
||||||
|
<el-input
|
||||||
|
placeholder="输入关键字进行过滤"
|
||||||
|
v-model="filterText">
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
<el-tree
|
||||||
|
class="filter-tree"
|
||||||
|
:data="data2"
|
||||||
|
:props="defaultProps"
|
||||||
|
default-expand-all
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
ref="tree2">
|
||||||
|
</el-tree>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
watch: {
|
||||||
|
filterText(val) {
|
||||||
|
this.$refs.tree2.filter(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
filterNode(value, data) {
|
||||||
|
if (!value) return true;
|
||||||
|
return data.label.indexOf(value) !== -1;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
filterText: '',
|
||||||
|
data2: [{
|
||||||
|
id: 1,
|
||||||
|
label: '一级 1',
|
||||||
|
children: [{
|
||||||
|
id: 4,
|
||||||
|
label: '二级 1-1',
|
||||||
|
children: [{
|
||||||
|
id: 9,
|
||||||
|
label: '三级 1-1-1'
|
||||||
|
}, {
|
||||||
|
id: 10,
|
||||||
|
label: '三级 1-1-2'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
label: '一级 2',
|
||||||
|
children: [{
|
||||||
|
id: 5,
|
||||||
|
label: '二级 2-1'
|
||||||
|
}, {
|
||||||
|
id: 6,
|
||||||
|
label: '二级 2-2'
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
label: '一级 3',
|
||||||
|
children: [{
|
||||||
|
id: 7,
|
||||||
|
label: '二级 3-1'
|
||||||
|
}, {
|
||||||
|
id: 8,
|
||||||
|
label: '二级 3-2'
|
||||||
|
}]
|
||||||
|
}],
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'label'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
### 手风琴模式
|
### 手风琴模式
|
||||||
|
|
||||||
每次只打开一个同级树节点展开
|
每次只打开一个同级树节点展开
|
||||||
|
|
||||||
::: demo
|
::: demo
|
||||||
```html
|
```html
|
||||||
<el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick"></el-tree>
|
<el-tree
|
||||||
|
:data="data"
|
||||||
|
:props="defaultProps"
|
||||||
|
accordion
|
||||||
|
@node-click="handleNodeClick">
|
||||||
|
</el-tree>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -339,6 +784,7 @@
|
||||||
| default-checked-keys | 默认勾选的节点的 key 的数组 | array | — | — |
|
| default-checked-keys | 默认勾选的节点的 key 的数组 | array | — | — |
|
||||||
| filter-node-method | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | — | — |
|
| filter-node-method | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | — | — |
|
||||||
| accordion | 是否每次只打开一个同级树节点展开 | boolean | — | false |
|
| accordion | 是否每次只打开一个同级树节点展开 | boolean | — | false |
|
||||||
|
| indent | 相邻级节点间的水平缩进，单位为像素 | number | — | 16 |
|
||||||
|
|
||||||
### props
|
### props
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,6 @@
|
||||||
width: var(--msgbox-width);
|
width: var(--msgbox-width);
|
||||||
border-radius: var(--msgbox-border-radius);
|
border-radius: var(--msgbox-border-radius);
|
||||||
font-size: var(--msgbox-font-size);
|
font-size: var(--msgbox-font-size);
|
||||||
-webkit-user-select: none;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
backface-visibility: hidden;
|
backface-visibility: hidden;
|
||||||
@e wrapper {
|
@e wrapper {
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
'is-hidden': !node.visible
|
'is-hidden': !node.visible
|
||||||
}">
|
}">
|
||||||
<div class="el-tree-node__content"
|
<div class="el-tree-node__content"
|
||||||
:style="{ 'padding-left': (node.level - 1) * 16 + 'px' }">
|
:style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
|
||||||
<span
|
<span
|
||||||
class="el-tree-node__expand-icon"
|
class="el-tree-node__expand-icon"
|
||||||
@click.stop="handleExpandIconClick"
|
@click.stop="handleExpandIconClick"
|
||||||
|
|
|
||||||
|
|
@ -81,7 +81,11 @@
|
||||||
currentNodeKey: [String, Number],
|
currentNodeKey: [String, Number],
|
||||||
load: Function,
|
load: Function,
|
||||||
filterNodeMethod: Function,
|
filterNodeMethod: Function,
|
||||||
accordion: Boolean
|
accordion: Boolean,
|
||||||
|
indent: {
|
||||||
|
type: Number,
|
||||||
|
default: 16
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue