在使用 element-tree
时,我们可以通过以下方式实现鼠标移入和移出的效果。在组件的模板中,为树节点添加 @mouseover
和 @mouseleave
事件处理函数,如 @mouseover="mouseover(node, data)" @mouseleave="mouseleave(node, data)"
。在方法中,通过 $set
方法设置节点数据的 show
属性,从而控制操作按钮的显示与隐藏。
需要注意的是,具体的实现细节可能因项目需求而有所不同。
<div class="left-body">
<el-tree
:data="data"
node-key="id"
accordion
:expand-on-click-node="false">
<div class="custom-tree-node" slot-scope="{ node, data }" @mouseover="mouseover(node, data)" @mouseleave="mouseleave(node, data)">
<div>{{ node.label }}</div>
<div v-show="data.show">
<el-button
v-if="buttonVisible"
type="text"
:size="size"
@click="() => append(data)">
修改
</el-button>
<el-button
v-if="buttonVisible"
type="text"
:size="size"
@click="() => remove(node, data)">
删除
</el-button>
<el-button
v-if="buttonVisible"
type="text"
:size="size"
@click="() => remove(node, data)">
设置变量
</el-button>
</div>
</div>
</el-tree>
</div>
methods: {
// 树节点鼠标移入移出
mouseover(node, data) {
this.$set(data, 'show', true)
},
// 树节点鼠标移入
mouseleave(node, data) {
this.$set(data, 'show', false)
},
}