流量好幾遍網(wǎng)站沒有解決方案,可能都是不愿分享自己藏著吧燕差,那我給大家分享下遭笋,其實(shí)很簡單:先看效果
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大概是這意思,可以自行去網(wǎng)上搜索復(fù)制更多代碼:
menuItems: [
{
id: 0,
label: "全網(wǎng)",
children: [
{
id: 1,
label: "未分組",
},
{
id: 2,
label: "西城區(qū)",
children: [
{
label: "新街口街道",
icon: 'el-icon-plus'
}, {
label: "陶然亭街道"
}
]
},
]
}
],
renderContent方法的實(shí)現(xiàn):
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和離開的時候給數(shù)據(jù)賦值
mouseenteract(da){
this.isact = da
},
mouseleaveact(da){
this.isact = ''
},
其中三目運(yùn)算是核心this.isact == data徒探?'':''
小伙子你也看過了瓦呼,不給錢給個贊不過分吧~