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
|
||||
@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);
|
||||
|
|
|
@ -128,7 +128,8 @@
|
|||
type: Number,
|
||||
default: 18
|
||||
},
|
||||
iconClass: String
|
||||
iconClass: String,
|
||||
expandIconClass: String
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
Loading…
Reference in New Issue