tree: support custom tree icon

pull/18306/head
Cold Stone 2019-12-05 11:02:09 +08:00
parent 6ec5f8e900
commit 49da8f5be2
3 changed files with 76 additions and 3 deletions

View File

@ -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>
```
:::
### 自定义节点内容 ### 自定义节点内容
节点的内容支持自定义,可以在节点区添加按钮或图标等内容 节点的内容支持自定义,可以在节点区添加按钮或图标等内容

View File

@ -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);

View File

@ -128,7 +128,8 @@
type: Number, type: Number,
default: 18 default: 18
}, },
iconClass: String iconClass: String,
expandIconClass: String
}, },
computed: { computed: {