mirror of https://github.com/ElemeFE/element
tree: support custom tree icon
parent
6ec5f8e900
commit
49da8f5be2
|
@ -395,6 +395,65 @@
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
### 自定义节点图标
|
||||||
|
设置节点默认和展开的自定义图标
|
||||||
|
|
||||||
|
:::demo 节点默认和展开状态的图标可以通过 `iconClass` 和 `expandIconClass` 进行设置。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<el-tree
|
||||||
|
:data="data"
|
||||||
|
node-key="id"
|
||||||
|
iconClass="el-icon-circle-plus-outline"
|
||||||
|
expandIconClass="el-icon-remove-outline">
|
||||||
|
</el-tree>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
data: [{
|
||||||
|
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'
|
||||||
|
}]
|
||||||
|
}],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
### 自定义节点内容
|
### 自定义节点内容
|
||||||
节点的内容支持自定义,可以在节点区添加按钮或图标等内容
|
节点的内容支持自定义,可以在节点区添加按钮或图标等内容
|
||||||
|
|
||||||
|
|
|
@ -28,9 +28,9 @@
|
||||||
<span
|
<span
|
||||||
@click.stop="handleExpandIconClick"
|
@click.stop="handleExpandIconClick"
|
||||||
:class="[
|
:class="[
|
||||||
{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
|
{ 'is-leaf': node.isLeaf },
|
||||||
'el-tree-node__expand-icon',
|
'el-tree-node__expand-icon',
|
||||||
tree.iconClass ? tree.iconClass : 'el-icon-caret-right'
|
iconClass
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
</span>
|
</span>
|
||||||
|
@ -137,6 +137,19 @@
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
iconClass() {
|
||||||
|
if(this.node.expanded && !this.node.isLeaf) {
|
||||||
|
if(this.tree.expandIconClass) {
|
||||||
|
return this.tree.expandIconClass
|
||||||
|
} else {
|
||||||
|
return 'el-icon-caret-right expanded'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return this.tree.iconClass ? this.tree.iconClass : 'el-icon-caret-right'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
'node.indeterminate'(val) {
|
'node.indeterminate'(val) {
|
||||||
this.handleSelectChange(this.node.checked, val);
|
this.handleSelectChange(this.node.checked, val);
|
||||||
|
|
|
@ -128,7 +128,8 @@
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 18
|
default: 18
|
||||||
},
|
},
|
||||||
iconClass: String
|
iconClass: String,
|
||||||
|
expandIconClass: String
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
|
Loading…
Reference in New Issue