element-ui 树ui

代码没什么问题，单独把树的代码抠出来就显示不出来写的ui效果了，咱也不知道为啥，就是没生效，就留着当个笔记看看叭

1、效果图，差不多就是这么个样子

2、代码

<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>

参考:
1、ElementUi的el-tree组件样式修改
2、element-ui tree树形控件 自定义节点内容
3、vue.js 使用递归函数实现菜单树和处理数据的思路