element-tree 树节点 鼠标移到树节点上的时候显示当前节点后的操作 移出的时候隐藏操作按钮,点击指定的树节点的时候显示操作按钮
<template>
<el-container>
<el-aside>
<el-container>
<el-header>
</el-header>
<el-main>
<el-tree ref="tree"
:props="treeProps"
:node-key="id"
:load="loadLeftTree"
:filter-node-method="filterNode"
:render-after-expand="false"
:highlight-current="true"
lazy
@node-click="handleNodeClick">
<span slot-scope="{ node, data }"
class="custom-tree-node" @mouseenter="mouseenter(node, data)" @mouseleave="mouseleave(node, data)">
<span style="display:flex">
<span :title="node.label"
class="treeNodeStyle">{{ node.label }}
</span>
<span v-show="data.isClassify === 0 && data.status === 0" style="margin-left:20px"><i class="el-icon-remove-outline"/></span>
</span>
</span>
</el-tree>
</el-main>
</el-container>
</el-aside>
<el-main>
<el-container style="height:100%">
</el-container>
</el-main>
</el-container>
</template>
<script>
export default {
components: {
},
data () {
return {
clickCode: []
}
},
computed: {},
watch: {
},
created () {
},
activated () {
},
methods: {
// 树节点鼠标移入移出
mouseenter(node, data) {
this.$set(data, 'show', true)
},
// 树节点鼠标移入
mouseleave(node, data) {
if (this.clickCode[0] && data.classifyCode === this.clickCode[0].classifyCode) {
this.$set(data, 'show', true)
} else {
this.$set(data, 'show', false)
}
// this.$set(data, 'show', false)
},
async handleNodeClick (data, node, el) { // 点击node 进行编辑
console.log(data)
// this.$set(data, 'show', true)
if (this.clickCode.length) {
if (this.clickCode[0].classifyCode === data.classifyCode) {
// this.$set(data, 'show', true)
} else {
this.$set(this.clickCode[0], 'show', false)
this.$set(data, 'show', true)
this.clickCode.splice(0, 1, data)
}
} else {
this.$set(data, 'show', true)
this.clickCode.push(data)
}
}
}
</script>
<style lang="less" scoped>
</style>
<style lang="less">
</style>
也可以把clickCode换成对象 一样的操作就是数组和对象的判断方法不同