File tree Expand file tree Collapse file tree 3 files changed +76
-3
lines changed
Expand file tree Collapse file tree 3 files changed +76
-3
lines changed Original file line number Diff line number Diff line change 395395```
396396:::
397397
398+ ### 自定义节点图标
399+ 设置节点默认和展开的自定义图标
400+
401+ :::demo 节点默认和展开状态的图标可以通过 ` iconClass ` 和 ` expandIconClass ` 进行设置。
402+
403+ ``` html
404+ <el-tree
405+ :data =" data"
406+ node-key =" id"
407+ iconClass =" el-icon-circle-plus-outline"
408+ expandIconClass =" el-icon-remove-outline" >
409+ </el-tree >
410+
411+ <script >
412+ export default {
413+ data () {
414+ return {
415+ data: [{
416+ id: 1 ,
417+ label: ' 一级 1' ,
418+ children: [{
419+ id: 4 ,
420+ label: ' 二级 1-1' ,
421+ children: [{
422+ id: 9 ,
423+ label: ' 三级 1-1-1'
424+ }, {
425+ id: 10 ,
426+ label: ' 三级 1-1-2'
427+ }]
428+ }]
429+ }, {
430+ id: 2 ,
431+ label: ' 一级 2' ,
432+ children: [{
433+ id: 5 ,
434+ label: ' 二级 2-1'
435+ }, {
436+ id: 6 ,
437+ label: ' 二级 2-2'
438+ }]
439+ }, {
440+ id: 3 ,
441+ label: ' 一级 3' ,
442+ children: [{
443+ id: 7 ,
444+ label: ' 二级 3-1'
445+ }, {
446+ id: 8 ,
447+ label: ' 二级 3-2'
448+ }]
449+ }],
450+ };
451+ }
452+ };
453+ </script >
454+ ```
455+ :::
456+
398457### 自定义节点内容
399458节点的内容支持自定义,可以在节点区添加按钮或图标等内容
400459
Original file line number Diff line number Diff line change 2828 <span
2929 @click.stop =" handleExpandIconClick"
3030 :class =" [
31- { 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
31+ { 'is-leaf': node.isLeaf },
3232 'el-tree-node__expand-icon',
33- tree. iconClass ? tree.iconClass : 'el-icon-caret-right'
33+ iconClass
3434 ]"
3535 >
3636 </span >
137137 };
138138 },
139139
140+ computed: {
141+ iconClass () {
142+ if (this .node .expanded && ! this .node .isLeaf ) {
143+ if (this .tree .expandIconClass ) {
144+ return this .tree .expandIconClass
145+ } else {
146+ return ' el-icon-caret-right expanded'
147+ }
148+ }
149+ return this .tree .iconClass ? this .tree .iconClass : ' el-icon-caret-right'
150+ }
151+ },
152+
140153 watch: {
141154 ' node.indeterminate' (val) {
142155 this .handleSelectChange (this .node .checked , val);
Original file line number Diff line number Diff line change 128128 type: Number ,
129129 default: 18
130130 },
131- iconClass: String
131+ iconClass: String ,
132+ expandIconClass: String
132133 },
133134
134135 computed: {
You can’t perform that action at this time.
0 commit comments