There is nothing wrong with the code. If you just dig out the code of the tree, the ui effect will not be displayed. We don’t know why, but it doesn’t work. Let’s keep it as a note.
1. The effect picture is almost like this
2. Code
<template>
<div class="body">
<span>测试</span>
<span>树</span>
<el-tree :data="data" :default-checked-keys="checkedKeys" show-checkbox default-expand-all node-key="id" ref="tree"
highlight-current :props="defaultProps" @check-change="handleCheckChange"></el-tree>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
data:[
{
id:1, //父子id不重复
label:"1内容",
children:[
{
id:3,
pid:1,
label:'1.1内容'
},
{
id:4,
pid:1,
label:'1.2内容'
},
{
id:5,
pid:1,
label:'1.3内容'
},
// ...
]
},
{
id:2,
label:"2内容",
children:[]
}
// ...
],
checkedKeys:[3,4],//默认选中，编辑时回显,子id数组
defaultProps: {
children: 'children',
label: 'label'
},
}
},
methods: {
handleCheckChange(){
// 获取node节点
console.log(this.$refs.tree.getCheckedNodes());
// 获取key
console.log("key",this.$refs.tree.getCheckedKeys());
}
}
}
</script>
<style lang="less">
/* tree */
.el-tree{
background-color: #FBFBFC;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #4F9884;
border-color: #4F9884;
}
.el-checkbox__inner{
border-color: #8F949B;
}
.el-checkbox__inner:hover {
border-color: #4F9884;
}
// .el-checkbox__inner:focus {
// border-color: #4F9884;
// }
.el-tree--highlight-current .el-tree-node.is-current >.el-tree-node__content {
background-color: #FBFBFC;
}
// .el-tree-node__content:hover, .el-upload-list__item:hover {
// background-color: #FBFBFC;
// }
// .el-tree-node__content:active, .el-upload-list__item:click {
// background-color: #FBFBFC;
// }
.tree /deep/ {
overflow-y:auto;
z-index: 2;
.el-tree-node {
position: relative;
padding-left: 16px;
z-index: 1;
}
//节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
.el-tree-node__expand-icon.is-leaf {
display: none;
}
.el-tree-node__children {
padding-left: 16px;
}
.el-tree-node :last-child:before {
height: 38px;
}
.el-tree > .el-tree-node:before {
border-left: none;
}
.el-tree > .el-tree-node:after {
// border-top: none;
}
.tree .el-tree-node__content:after{
content: '';
left: -9px;
position: absolute;
right: auto;
border-width: 1px;
border-left: 1px dashed #8F949B;
bottom: 0px;
height: 100%;
top: -26px;
width: 1px;
z-index: 1;
}
.el-tree-node:before {
content: '';
left: -9px;
position: absolute;
right: auto;
border-width: 1px;
}
.el-tree-node:after {
content: '';
left: -5px;
position: absolute;
right: auto;
border-width: 1px;
}
.el-tree-node:before {
border-left: 1px dashed #8F949B;
bottom: -14px;
top: -34px;
width: 1px;
}
.el-tree-node:after {
border-top: 1px dashed #8F949B;
height: 20px;
top: 13px;
width: 17px;
}
.el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.el-tree .el-icon-caret-right:before {
//+
content: "+";
border: 1px solid #8F949B;
border-radius: 2px;
height: 12px;
width: 12px;
text-align: center;
line-height: 12px;
color: #8F949B;
margin-right:16px;
// background-image: url(@/assets/aa.jpg);
font-size :16px;
position: absolute;
left: -32px;
top: -6px;
}
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
content: "-";
border: 1px solid #8F949B;
height: 12px;
width: 12px;
text-align: center;
line-height: 12px;
color: #8F949B;
border-radius: 2px;
font-size :16px;
position :absolute;
left: -32px;
top: -6px;
// left :-20px;
// top :-8px;
}
.el-tree-node__content>.el-tree-node__expand-icon {
padding :0;
}
.el-tree-node__content{
padding-left: 0px!important;
}
}
</style>
References:
1. ElementUi's el-tree component style modification
2. element-ui tree tree control custom node content
3. vue.js uses recursive functions to realize the menu tree and the idea of processing data