在项目上需到一个小需求element树的节点操作按钮比较多的情况,该如何处理?下图是后面给的需求:
我这里使用的引入cdn去使用的vue+element,脚手架的小伙伴,代码拷过去一样可以用,话不多说上干货!!!!!!!
html:
<div class="leftTree" id="leftTree">
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
<div class="comp-tr-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<el-popover placement="right" width="110" trigger="hover">
<div class="qpdiv">
<div>
<el-button type="text">编辑</el-button>
</div>
<div>
<el-button type="text">删除</el-button>
</div>
<div>
<el-button type="text">添加节点</el-button>
</div>
<div>
<el-button type="text">上移</el-button>
</div>
<div>
<el-button type="text">下移</el-button>
</div>
</div>
<i class="el-icon-more nodeIcon" slot="reference" title="点击出现菜
单"></i>
</el-popover>
</div>
</el-tree>
</div>
js:
<script type="text/javascript">
let vm = new Vue({
el: "#leftTree",
data() {
return {
data: [{
label: '一级 1',
visible: false,
children: [{
label: '二级 1-1',
visible: false,
children: [{
label: '三级 1-1-1',
visible: false,
}]
}]
}, {
label: '一级 2',
visible: false,
children: [{
label: '二级 2-1',
visible: false,
children: [{
label: '三级 2-1-1',
visible: false
}]
}, {
label: '二级 2-2',
visible: false,
children: [{
label: '三级 2-2-1',
visible: false
}]
}]
}, {
label: '一级 3',
visible: false,
children: [{
label: '二级 3-1',
visible: false,
children: [{
label: '三级 3-1-1',
visible: false
}]
}, {
label: '二级 3-2',
visible: false,
children: [{
label: '三级 3-2-1',
visible: false
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
})
</script>
css:
*{
padding:0;
margin:0;
}
body,html{
width:100%;
height: 100%;
}
#leftTree{
width:260px;
height:100%;
box-shadow: 2px 0 5px 5px #ccc;
}
.leftTree .el-tree-node__content{
position:relative;
}
/* .leftTree .el-tree-node__content:hover .nodeIcon{
display: block;
} */
.nodeIcon{
/* display: none; */
position: absolute;
transform: rotate(90deg);
top: 23%;
right: 10px;
color: #3789FF;
vertical-align: top;
}
以上就是全部代码希望能帮到小伙伴们!!!!!