iview tree组件鼠标移入显示新增、删除等按钮功能的实现

iview tree组件鼠标移入显示新增、删除等按钮功能的实现
实现思路：定义鼠标移入（mouseenter）移出事件（mouseleave）或者点击事件（click）,方法里面改变数据属性is_show来控制按钮显示隐藏

<template>
	<Tree style="margin:100px" class="interfaceTree"  :data="interfaceTree" :render="renderContentTree"></Tree>
</template>

准备数据

data(){
	return{
		interfaceTree: [{
          "children": [{"code": "14", "name": "111", "id": "014", "parentId": "1"}],
          "name": "分类11",
          "id": "1",
          "parentId": "0"
        }, {
          "children": [{"code": "15", "name": "222", "id": "015", "parentId": "2"}],
          "name": "分类2",
          "id": "2",
          "parentId": "0"
        }, {
          "children": [{"code": "36", "name": "32", "id": "036", "parentId": "26"}],
          "name": "分类3",
          "id": "26",
          "parentId": "0"
        }, {
          "children": [{"code": "38", "name": "3222", "id": "038", "parentId": "27"},
            {"code": "60", "name": "355", "id": "060", "parentId": "27"}
            ], "name": "分类3", "id": "27", "parentId": "0"
        }, {
          "children": [{"code": "54", "name": "422", "id": "054", "parentId": "39"}, {
            "code": "55",
            "name": "433",
            "id": "055",
            "parentId": "39"
          }], "name": "分类4", "id": "39", "parentId": "0"
        }]
	}
}

render函数定义鼠标事件

renderContentTree(h, {root, node, data}) {
        return h('span', {
          class:data.is_selected ? 'tree-children-span-active tree-children-span' : 'tree-children-span',
          on: {
            'mouseenter': () => {
              this.$set(data,'is_show',true);
            },
            'mouseleave': () => {
              this.$set(data,'is_show',false);
            },
            'click' : () => {
              console.log("data.parentId",data.parentId)
              //实现自己功能
            }
          }
        }, [
          h('span', data.name),//显示名称
          h('span', {
            class:'tree-children-buttonGroup',
            style: {
              display: data.is_show ? 'inline' : 'none',
            },
          }, [
            h('Tooltip', {
              props: {
                content: '添加接口',
                placement: 'top'
              },
            }, [
              h('Button', {
                props: {
                  icon: 'md-add',
                  type:'text'
                },
                style: {
                  display: data.parentId == 0 ? 'inline-block' : 'none',
                },
                on: {
                  click: (e) => {
                    //阻止冒泡
                    e.stopPropagation();
                    //实现自己功能
                  }
                }
              })
            ]),
            h('Tooltip', {
              props: {
                content: '修改分类',
                placement: 'top'
              },
            }, [
              h('Button', {
                props: {
                  icon: 'md-create',
                  type:'text'
                },
                style: {
                  display: data.parentId == 0 ? 'inline-block' : 'none',
                },
                on: {
                  click: (e) => {
                    //阻止冒泡
                    e.stopPropagation();
                    //实现自己功能
                  }
                }
              })
            ]),
            h('Tooltip', {
              props: {
                content: '删除分类',
                placement: 'top'
              },
            }, [
              h('Button', {
                props: {
                  icon: 'md-trash',
                  type:'text'
                },
                style: {
                  display: data.parentId == 0 ? 'inline-block' : 'none',
                },
                on: {
                  click: (e) => {
                    //阻止冒泡
                    e.stopPropagation();
                    //实现自己功能
                  }
                }
              })
            ]),
            h('Tooltip', {
              props: {
                content: '删除接口',
                placement: 'top'
              },
            }, [
              h('Button', {
                props: {
                  icon: 'md-trash',
                  type:'text'
                },
                style: {
                  display: data.parentId == 0 || data.parentId == -1 ? 'none' : 'inline-block',
                },
                on: {
                  click: (e) => {
                    //阻止冒泡
                    e.stopPropagation();
                    //实现自己功能
                  }
                }
              })
            ]),
          ]),
        ]);
      },

树形控件样式

<style  lang="less">
  .interfaceTree {
    width: 300px;
    height: 100%;
    flex: 0 0 300px;
    background: #fff;
    .interface-filter{
      padding: 12px 16px;
      line-height: 32px;
      background-color: #f4f4f4;
      position: relative
    }
    .ivu-tree{
      height: calc(100% - 66px);
      /*overflow-y: auto;*/
      padding:0 5px;
    }
    .tree-children-span-active{
      background: #f0fbff;
    }
    .tree-children-span{
      width: calc(100% - 18px);
      display: inline-block;
      position: relative;
      padding: 5px 3px;
      cursor: pointer;

      &:hover{
        background: #f0fbff;
      }
      .tree-children-buttonGroup{
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
</style>