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
@click.stop="handleExpandIconClick"
:class="[
{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
{ 'is-leaf': node.isLeaf },
'el-tree-node__expand-icon',
tree.iconClass ? tree.iconClass : 'el-icon-caret-right'
iconClass
]"
>
</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: {
'node.indeterminate'(val) {
this.handleSelectChange(this.node.checked, val);

View File

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