Vue-element-admin - 关于el-tree树形控

因为现在是大四实习生，前端小白一枚，入职公司要求做公司的某个项目后台管理系统所以开始学习Vue-element-admin框架。有很多不懂的地方请多指教。

• 效果图
• 实现代码
• 总结

1、效果图如下：

原本样式：

官方样式.jpg

修改后的样式

两层级样式 单层级样式

2、实现代码

写在HTML中的代码：
这里在外面加了滚动条<el-scrollbar></el-scrollbar>不需要的可自行去除

<div class="down-tree" style="width: 20%">
   <!-- tree -->
   <el-scrollbar><el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" @click="handleCreate" /></el-scrollbar>
</div>

写在JavaScript中的代码：
因为没有后台数据所以现在写的是死数据。

export default {
  data() {
    return {
      data: [{
        label: '新生儿评分规则',
        children: [{
          label: '儿内科评分规则'
        },
        {
          label: '心血管内科评分规则'
        },
        {
          label: 'Mews公共评分规则'
        },
        {
          label: 'Mews公共评分规则'
        },
        {
          label: 'Mews公共评分规则'
        },
        {
          label: 'Mews公共评分规则'
        }
        ]
      },
      {
        label: '新生儿评分规则',
        children: [{
          label: '儿内科评分规则'
        }, {
          label: '儿内科评分规则'
        }]
      }, {
        label: '神经内科评分规则',
        children: [{
          label: '神经内科评分规则'
        }, {
          label: '神经内科评分规则'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
   }
}

SCSS代码：

//设置容器的样式
 .down-tree{
    flex: 1;//父元素采用flex布局
    max-width:200px;//设置最小宽度
    height:678px;
    background:rgba(245,248,250,1);
    border-radius:3px;
    border:1px solid rgba(211,219,222,1);
    margin-left: 12px;
    padding: 14px;
    //设置滚动条高度，隐藏横向滚动条
    /deep/.el-scrollbar{
      height: 578px;
      .el-scrollbar__wrap{
        overflow-x: hidden;
      }
    }
  }

下面这一块是我新建一个SCSS文件全局引入的代码

.el-tree-node__label//设置字体大小
{
    font-size: 12px;
}
//修改前面展开的图标
.el-tree .el-tree-node__expand-icon.expanded
{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.el-tree .el-icon-caret-right:before
{
    background: url("../views/SystemMg/MEWSRule/images/文件夹.png") no-repeat;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 15px;
}
//判断子节点设置不同的样式
.el-tree-node__expand-icon.is-leaf::before
{
    background: url("../views/SystemMg/MEWSRule/images/子菜单.png") no-repeat;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 15px;
}
//设置每一项的背景颜色
.el-tree-node__content{
  background: #F5F8FA;
  height: 36px;
}
//设置当前选中项目的颜色
.el-tree-node.is-current > .el-tree-node__content {
  background-color: #FDE9BE !important;//背景颜色
  color: #333333;//字体颜色
}

关于如果不想把样式写到全局，只想在某个文件内修改样式的问题，因为有scoped的限制所以可以在前面加个/deep/解决

.down-tree{
    flex: 1;
    max-width:200px;
    height:678px;
    background:rgba(245,248,250,1);
    border-radius:3px;
    border:1px solid rgba(211,219,222,1);
    margin-left: 12px;
    padding: 14px;
    /deep/.el-tree-node__expand-icon.is-leaf::before
    {
        // display: none;
        background: url("../sysGroup/images/护士.png") no-repeat;
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        font-size: 18px;
        background-size: 15px;
    }
  }

这里我只修改了子节点的样式效果是这样的

修改局部子节点样式

3、总结

关于更多其他的属性比如check请移步官网文档噢，这里只是修改最简单的样式。

element Tree 树形控件：https://element.eleme.cn/#/zh-CN/component/tree