el-tree 鼠标移入节点显示 新增 删除 等按钮【Vue】
要达到这样的效果:
<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>
(data.show 是指的每条数据里的show)
data: [ { id: 0, label: '水果', show: false, children: [ { id: 1, label: '苹果', show: false },{ id: 2, label: '芒果', show: false } ] } ],
最后根据鼠标 mouseenter mouseleave改变show的状态即可
mouseenter(data) {
console.log(data)
data.show = true
}
mouseleave(data) {
console.log(data)
data.show = false
}
最后点击加号或删除 触发事件 就在对应的图标上添加方法就好