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>