因为现在是大四实习生，前端小白一枚，入职公司要求做公司的某个项目后台管理系统所以开始学习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
