流量好几遍网站没有解决方案,可能都是不愿分享自己藏着吧,那我给大家分享下,其实很简单:先看效果
hover上去:
取消hover:
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?'':''
小伙子你也看过了,不给钱给个赞不过分吧~