需求页面如下图所示
1.png
代码如下
1、template
<template>
<div class="operation_box">
<el-tree :data="data" node-key="label" class="tree" :props="defaultProps" :default-expanded-keys="['首页']">
</el-tree>
</div>
</template>
2、script
<script>
export default {
data() {
return {
data: [{
id: '1',
label: '首页',
children: [{
id: '1-1',
label: '党建头条',
children: [{
id: '1-1-1',
label: '中央声音'
}, {
id: '1-1-2',
label: '省委部署',
}, {
id: '1-1-3',
label: '组工动态',
}, {
id: '1-1-4',
label: '市县快讯',
}]
}, {
id: '1-2',
label: '热点资讯',
children: [{
id: '1-2-1',
label: '中央声音'
}, {
id: '1-2-2',
label: '省委部署',
}, {
id: '1-2-3',
label: '组工动态',
}, {
id: '1-2-4',
label: '市县快讯',
}]
}, {
id: '1-3',
label: '通知公告',
children: [{
id: '1-3-1',
label: '中央声音'
}, {
id: '1-3-2',
label: '省委部署',
}, {
id: '1-3-3',
label: '组工动态',
}, {
id: '1-3-4',
label: '市县快讯',
}]
}, {
id: '1-4',
label: '党建工作',
children: [{
id: '1-4-1',
label: '中央声音'
}, {
id: '1-4-2',
label: '省委部署',
}, {
id: '1-4-3',
label: '组工动态',
}, {
id: '1-4-4',
label: '市县快讯',
}]
}, {
id: '1-5',
label: '干部工作',
children: [{
id: '1-5-1',
label: '中央声音'
}, {
id: '1-5-2',
label: '省委部署',
}, {
id: '1-5-3',
label: '组工动态',
}, {
id: '1-5-4',
label: '市县快讯',
}]
}, {
id: '1-6',
label: '人才工作',
children: [{
id: '1-6-1',
label: '中央声音'
}, {
id: '1-6-2',
label: '省委部署',
}, {
id: '1-6-3',
label: '组工动态',
}, {
id: '1-6-4',
label: '市县快讯',
}]
}, {
id: '1-7',
label: '公务员工作',
children: [{
id: '1-2-1',
label: '中央声音'
}, {
id: '1-2-2',
label: '省委部署',
}, {
id: '1-2-3',
label: '组工动态',
}, {
id: '1-2-4',
label: '市县快讯',
}]
}, {
id: '1-8',
label: '专题',
children: [{
id: '1-8-1',
label: '中央声音'
}, {
id: '1-8-2',
label: '省委部署',
}, {
id: '1-8-3',
label: '组工动态',
}, {
id: '1-8-4',
label: '市县快讯',
}]
}]
}],
defaultProps: {
// 用于修改节点指定标签的属性值
children: 'children',
label: 'label'
}
}
},
}
</script>
3、css
.operation_box {
/deep/ .tree {
color: #595959;
background: transparent;
/* 树形结构节点添加连线 */
.el-tree-node {
position: relative;
padding-left: 16px;
.el-tree-node__content {
height: 18px;
padding-top: 16px;
padding-left: 0 !important;
.el-tree-node__expand-icon {
background: url(../../assets/img/operation/plus-square-outlined.png) no-repeat;
display: inline-block;
width: 16px;
height: 16px;
padding: 0;
&.expanded {
transform: none;
background: url(../../assets/img/operation/minus-square-outlined.png) no-repeat;
}
&::before {
content: '';
}
&.is-leaf {
display: none;
}
}
.el-tree-node__label {
margin-left: 10px;
}
}
&:last-child:before {
height: 50px;
}
&:before {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
border-left: 1px solid #BBBBBB;
bottom: 0px;
height: 100%;
top: -26px;
width: 1px;
}
&:after {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
border-top: 1px solid #BBBBBB;
height: 20px;
top: 24px;
width: 18px;
}
}
&>.el-tree-node {
&>.el-tree-node__content{
.el-tree-node__expand-icon{
background-image: url(../../assets/img/operation/folder-open-filled.png) !important;
}
}
&::after {
border: 0px solid;
}
}
.el-tree-node__children {
padding-left: 12px;
}
}
}
