因?yàn)楝F(xiàn)在是大四實(shí)習(xí)生，前端小白一枚，入職公司要求做公司的某個(gè)項(xiàng)目后臺管理系統(tǒng)所以開始學(xué)習(xí)Vue-element-admin框架。有很多不懂的地方請多指教痹屹。
- 效果圖
- 實(shí)現(xiàn)代碼
- 總結(jié)
1暖庄、效果圖如下：
原本樣式：
官方樣式.jpg
修改后的樣式
兩層級樣式
單層級樣式
2、實(shí)現(xiàn)代碼
寫在HTML中的代碼：
這里在外面加了滾動(dòng)條<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中的代碼：
因?yàn)闆]有后臺數(shù)據(jù)所以現(xiàn)在寫的是死數(shù)據(jù)。
export default {
data() {
return {
data: [{
label: '新生兒評分規(guī)則',
children: [{
label: '兒內(nèi)科評分規(guī)則'
},
{
label: '心血管內(nèi)科評分規(guī)則'
},
{
label: 'Mews公共評分規(guī)則'
},
{
label: 'Mews公共評分規(guī)則'
},
{
label: 'Mews公共評分規(guī)則'
},
{
label: 'Mews公共評分規(guī)則'
}
]
},
{
label: '新生兒評分規(guī)則',
children: [{
label: '兒內(nèi)科評分規(guī)則'
}, {
label: '兒內(nèi)科評分規(guī)則'
}]
}, {
label: '神經(jīng)內(nèi)科評分規(guī)則',
children: [{
label: '神經(jīng)內(nèi)科評分規(guī)則'
}, {
label: '神經(jīng)內(nèi)科評分規(guī)則'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
}
SCSS代碼：
//設(shè)置容器的樣式
.down-tree{
flex: 1;//父元素采用flex布局
max-width:200px;//設(shè)置最小寬度
height:678px;
background:rgba(245,248,250,1);
border-radius:3px;
border:1px solid rgba(211,219,222,1);
margin-left: 12px;
padding: 14px;
//設(shè)置滾動(dòng)條高度，隱藏橫向滾動(dòng)條
/deep/.el-scrollbar{
height: 578px;
.el-scrollbar__wrap{
overflow-x: hidden;
}
}
}
下面這一塊是我新建一個(gè)SCSS文件全局引入的代碼
.el-tree-node__label//設(shè)置字體大小
{
font-size: 12px;
}
//修改前面展開的圖標(biāo)
.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;
}
//判斷子節(jié)點(diǎn)設(shè)置不同的樣式
.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;
}
//設(shè)置每一項(xiàng)的背景顏色
.el-tree-node__content{
background: #F5F8FA;
height: 36px;
}
//設(shè)置當(dāng)前選中項(xiàng)目的顏色
.el-tree-node.is-current > .el-tree-node__content {
background-color: #FDE9BE !important;//背景顏色
color: #333333;//字體顏色
}
關(guān)于如果不想把樣式寫到全局，只想在某個(gè)文件內(nèi)修改樣式的問題窒百，因?yàn)橛衧coped的限制所以可以在前面加個(gè)/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/護(hù)士.png") no-repeat;
content: '';
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 15px;
}
}
這里我只修改了子節(jié)點(diǎn)的樣式效果是這樣的
修改局部子節(jié)點(diǎn)樣式
3妄呕、總結(jié)
關(guān)于更多其他的屬性比如check請移步官網(wǎng)文檔噢唠粥，這里只是修改最簡單的樣式。
element Tree 樹形控件：https://element.eleme.cn/#/zh-CN/component/tree
