el-tree实现鼠标移入出现/移除功能按钮

Math.random( ) ;

于 2021-12-06 15:10:37 发布

阅读量2.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 elementui vue

本文链接：https://blog.youkuaiyun.com/xcxcsdn/article/details/121747403

本文介绍了如何在Vue项目中利用Element UI的el-tree组件，实现在鼠标移入节点时显示编辑、添加和删除功能按钮，而鼠标移出时隐藏这些操作按钮的功能。通过这种方式，可以提升用户交互体验，使得操作更加直观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如下，当鼠标移入：

当鼠标移出：编辑、添加和删除的功能按钮便消失

上代码：

<el-tree
              ref="tree"
              :data="dataArr"
              node-key="id"
              :expand-on-click-node="true"
              :default-expanded-keys="oneTree"
              :props="defaultProps"
              highlight-current
              class="personTree"
              :filter-node-method="filterNodes"
              @node-click="nodeClick"
              @node-expand="handleNodeExpand"
              @node-collapse="handleNodeCollapse"
            >
                <span class="custom-tree-node" slot-scope="{ node, data }" 
                    @mouseover="mouseover(data)" @mouseleave="mouseout(data)">    //绑定鼠标移入和移出事件
                    <span>{{ node.label }}</span>
                    <span v-show="data.dropdownShow">
                    <i @click="editRegion" class="el-icon-edit"></i>//插入按钮
                    <i @click="newAdd" class="el-icon-circle-plus-outline"></i>
                    <i @click="deleteOldNode" class="el-icon-delete"></i>
                    </span>
                </span>
            </el-tree>

// 鼠标移入出现/消失图标
  methods: {
    mouseover (data) { // 移入
      console.log(data,'110')
      this.$set(data, 'dropdownShow', true)
    },
    mouseout (data) { // 移除
      this.$set(data, 'dropdownShow', false)
    },
  }