Skip to content

E
Element
Commit 7391c488 authored by Leopoldthecoder's avatar Leopoldthecoder Committed by 杨奕
Browse files
Options

Tree: add indent, update docs

parent 8e34408d
Show whitespace changes
Inline Side-by-side
Showing with 904 additions and 17 deletions
examples/docs/en-US/input.md
View file @ 7391c488
...@@ -608,6 +608,7 @@ Search data from server-side. ...@@ -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 | — |
......
examples/docs/en-US/tree.md
View file @ 7391c488
...@@ -35,6 +35,44 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 ...@@ -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. ...@@ -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 |
......
examples/docs/zh-CN/input.md
View file @ 7391c488
...@@ -765,6 +765,7 @@ export 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 | — |
......
examples/docs/zh-CN/tree.md
View file @ 7391c488
<style> <style>
.demo-tree {
.leaf { .leaf {
width: 20px; width: 20px;
background: #ddd; background: #ddd;
...@@ -8,6 +9,15 @@ ...@@ -8,6 +9,15 @@
width: 20px; width: 20px;
background: #888; background: #888;
} }
.buttons {
margin-top: 20px;
}
.filter-tree {
margin-top: 20px;
}
}
</style> </style>
<script> <script>
...@@ -47,6 +57,44 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
......
packages/theme-default/src/message-box.css
View file @ 7391c488
...@@ -14,7 +14,6 @@ ...@@ -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 {
......
packages/tree/src/tree-node.vue
View file @ 7391c488
...@@ -8,7 +8,7 @@ ...@@ -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"
......
packages/tree/src/tree.vue
View file @ 7391c488
...@@ -81,7 +81,11 @@ ...@@ -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: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment