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 |
|
||||
|auto-complete | same as `auto-complete` in native input | string | on/off | off |
|
||||
|name | same as `name` in native input | string | — | — |
|
||||
| readonly | same as `readonly` in native input | boolean | — | false |
|
||||
|max | same as `max` in native input | * | — | — |
|
||||
|min | same as `min` in native input | * | — | — |
|
||||
|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 = [{
|
||||
'name': 'region1'
|
||||
}, {
|
||||
|
|
@ -48,12 +86,18 @@
|
|||
children: 'zones'
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
};
|
||||
|
||||
export default {
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree2.filter(val);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleCheckChange(data, checked, indeterminate) {
|
||||
console.log(data, checked, indeterminate);
|
||||
|
|
@ -89,15 +133,68 @@
|
|||
|
||||
resolve(data);
|
||||
}, 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() {
|
||||
return {
|
||||
data,
|
||||
data2,
|
||||
regions,
|
||||
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
|
||||
|
||||
Only one node among the same level can be expanded at one time.
|
||||
|
||||
::: demo
|
||||
```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>
|
||||
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 | — | — |
|
||||
| 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 |
|
||||
| indent | horizontal indentation of nodes in adjacent levels in pixels | number | — | 16 |
|
||||
|
||||
### props
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|
|
|
|||
|
|
@ -765,6 +765,7 @@ export default {
|
|||
| autosize | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean/object | — | false |
|
||||
| auto-complete | 原生属性，自动补全 | string | on, off | off |
|
||||
| name | 原生属性 | string | — | — |
|
||||
| readonly | 原生属性，是否只读 | boolean | — | false |
|
||||
| max | 原生属性，设置最大值 | * | — | — |
|
||||
| min | 原生属性，设置最小值 | * | — | — |
|
||||
| resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |
|
||||
|
|
|
|||
|
|
@ -1,12 +1,22 @@
|
|||
<style>
|
||||
.leaf {
|
||||
width: 20px;
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.folder {
|
||||
width: 20px;
|
||||
background: #888;
|
||||
.demo-tree {
|
||||
.leaf {
|
||||
width: 20px;
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.folder {
|
||||
width: 20px;
|
||||
background: #888;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.filter-tree {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</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 = [{
|
||||
'name': 'region1'
|
||||
}, {
|
||||
|
|
@ -60,12 +108,18 @@
|
|||
children: 'zones'
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
};
|
||||
|
||||
export default {
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree2.filter(val);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleCheckChange(data, checked, indeterminate) {
|
||||
console.log(data, checked, indeterminate);
|
||||
|
|
@ -101,15 +155,68 @@
|
|||
|
||||
resolve(data);
|
||||
}, 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() {
|
||||
return {
|
||||
data,
|
||||
data2,
|
||||
regions,
|
||||
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
|
||||
```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>
|
||||
export default {
|
||||
|
|
@ -339,6 +784,7 @@
|
|||
| default-checked-keys | 默认勾选的节点的 key 的数组 | array | — | — |
|
||||
| filter-node-method | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | — | — |
|
||||
| accordion | 是否每次只打开一个同级树节点展开 | boolean | — | false |
|
||||
| indent | 相邻级节点间的水平缩进，单位为像素 | number | — | 16 |
|
||||
|
||||
### props
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
width: var(--msgbox-width);
|
||||
border-radius: var(--msgbox-border-radius);
|
||||
font-size: var(--msgbox-font-size);
|
||||
-webkit-user-select: none;
|
||||
overflow: hidden;
|
||||
backface-visibility: hidden;
|
||||
@e wrapper {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
'is-hidden': !node.visible
|
||||
}">
|
||||
<div class="el-tree-node__content"
|
||||
:style="{ 'padding-left': (node.level - 1) * 16 + 'px' }">
|
||||
:style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
|
||||
<span
|
||||
class="el-tree-node__expand-icon"
|
||||
@click.stop="handleExpandIconClick"
|
||||
|
|
|
|||
|
|
@ -81,7 +81,11 @@
|
|||
currentNodeKey: [String, Number],
|
||||
load: Function,
|
||||
filterNodeMethod: Function,
|
||||
accordion: Boolean
|
||||
accordion: Boolean,
|
||||
indent: {
|
||||
type: Number,
|
||||
default: 16
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue