element-tree鼠标移入显示操作鼠标移出隐藏操作 点击树节点显示操做

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换成对象 一样的操作就是数组和对象的判断方法不同

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值