Element-ui树形控件el-tree鼠标移入显示隐藏效果超简单
显示效果:
废话不多说,直接上代码
<template> <el-tree default-expand-all :data="data"> <span class="custom-tree-node" slot-scope="{ node, data }" style="width:100%;" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)"> <span>{{ node.label }}</span> <el-link v-show="data.show" size="mini" style="margin-left: 5px" type="primary" icon="el-icon-plus"></el-link> <el-link v-show="data.show" size="mini" style="margin-left: 5px" type="primary" icon="el-icon-delete"></el-link> </span> </el-tree> </template> <script> export default { data() { return { data: [ { id: 0, label: '水果', show: false, children: [ { id: 1, label: '苹果', show: false },{ id: 2, label: '芒果', show: false } ] } ], } }, methods:{ mouseenter(data) { this.$set(data, 'show', true) }, mouseleave(data) { this.$set(data, 'show', false) } } } </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步