elementui tree组件自定义内容,实现移入label显示操作按钮
1.效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/5ce0431a192544e4931ed69c8fdcf23c.gif#pic_center)
2.实现
<el-tree @node-click="showRuleBysort" :data="data" v-if="data != null" node-key="id" :expand-on-click-node="false"
:props='{
label: "groupName"
}'>
<div class="custom-tree-node" slot-scope="{ node, data }" @mouseleave="mouseleave(data, $event)"
@mouseover="mouseover(data, $event)">
<span>{{ node.label }}</span>
<i class="el-icon-edit none" @click="editTree(data)"></i>
</div>
</el-tree>
mouseleave(data, $event) {
$event.currentTarget.firstElementChild.nextElementSibling.setAttribute(
"class",
"el-icon-edit none"
);
},
mouseover(data, $event) {
$event.currentTarget.firstElementChild.nextElementSibling.setAttribute(
"class",
"el-icon-edit block"
);
},
.left{ .none {
display: none;
}
.block{
display:block
}