需求:el-tree鼠标移动到文字上,出现小图标(后期需要点击小图标出现小窗,进行各种操作)
两种方法:
一,js方法,使用鼠标移入移出方法
<el-tree
:data="treeList"
ref="tree"
:key="reload"
>
<template #default="{ node, data }">
<div
@mouseenter="updateShowStatus(data, true)"
@mouseleave="updateShowStatus(data, false)"
>
{{data.label}}
//此处是小图标,根据ifShowbtn判断小图标的显示和隐藏
<el-button
v-show="data.ifShowbtn"
class="el-icon-circle-plus-outline"
></el-button>
</div>
</template>
</el-tree>
js部分:* 重点:reload,给tree加key,然后修改完数据更新reload,不加这一句,就会出现只改变了数据,树的渲染不会变,加key也适用于动态改变el-tabe时候
data(){
return {
reload: 0,
}
}
updateShowStatus(data, value) {
let keyStr = data.indexId + data.type + '';
let that = this;
function changeIfShowbtn(data, keyStr) {
let key = data.indexId + data.type + ''; // 当前点击的节点ID ,唯一标志
// 检查当前节点的ID是否与目标ID匹配
if (key === keyStr) {
// 如果匹配,将新数据添加到该节点的children数组中
that.$set(data, 'ifShowbtn', value);
return;
}
// 如果当前节点有子节点,则递归遍历子节点
if (data.children && data.children.length > 0) {
for (let child of data.children) {
changeIfShowbtn(child, keyStr);
}
}
}
// 对treeData中的每一个节点调用上面的函数
for (let data of this.treeList) {
changeIfShowbtn(data, keyStr);
}
//重点是这句
this.reload = Math.random();
console.log('data.ifShowbtn1111', this.treeList, data.ifShowbtn);
},
方法二:使用css,
我一开始使用方法一,因为没加key,死活不起作用,只能改用css,挺好用,后面研究出key了,反正也一起分享出来呗
···html
<template #default="{ node, data }">
{{data.label}}
文件夹</el-button
···
*关键css
.node-item {
.show-btn {
display: none;
}
}
.node-item:hover {
.show-btn {
display: block !important; /* 鼠标经过时的背景颜色 */
}
}
后面还写了树添加文件夹,重命名的操作,样式上就是要展示输入框