Vue-el-tree操作按钮，常亮和hover显示

流量好几遍网站没有解决方案，可能都是不愿分享自己藏着吧，那我给大家分享下，其实很简单：先看效果
hover上去：

image.png

取消hover：

image.png

HTML代码：用到

:render-content="renderContent"

具体用法：

<el-tree
        class="tree"
        :data="menuItems"
        show-checkbox
        node-key="id"
        :default-expanded-keys="expandedKeys"
        :default-checked-keys="checkedKeys"
        :props="defaultProps"
        :expand-on-click-node="false"
        :render-content="renderContent"
      ></el-tree>

script代码define属性:

isact: '',

data大概是这意思，可以自行去网上搜索复制更多代码:

menuItems: [
          {
            id: 0,
            label: "全网",
            children: [
              {
                id: 1,
                label: "未分组",
              },
              {
                id: 2,
                label: "西城区",
                children: [
                  {
                    label: "新街口街道",
                    icon: 'el-icon-plus'
                  }, {
                    label: "陶然亭街道"
                  }
                ]
              },
            ]
          }
        ],

renderContent方法的实现：

renderContent(h, { node, data, store }) {
        return (
          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;"
          on-mouseenter={() => this.mouseenteract(data)}
          on-mouseleave={() => this.mouseleaveact(data)}>
            <span>
              <span >{node.label}</span>
            </span>
            {this.isact == data?
              <span>
              <el-button type="text" icon="el-icon-plus" on-click={ () => this.append(data)}></el-button>
              <el-button type="text" icon="el-icon-delete" on-click={ () => this.remove(node, data) }></el-button>
            </span>
            :
            <span>
            </span>
            }
            
          </span>
          );
      },

别忘了在hover和离开的时候给数据赋值

mouseenteract(da){
    this.isact = da
},
mouseleaveact(da){
   this.isact = ''
},

其中三目运算是核心this.isact == data？'':''

小伙子你也看过了，不给钱给个赞不过分吧~