按照業(yè)務需求，要做一個權限菜單虱疏，方便設置人員的權限惹骂，在網(wǎng)上沒有找到想要的效果，自己琢磨了一下做瞪，如下為效果圖：
菜單權限.png
1对粪、從接口獲取所有權限的數(shù)據(jù)，如果獲取的數(shù)據(jù)不是樹形結構装蓬，先處理為樹形結構
（1）vue代碼如下：
<div class="table">
<el-scrollbar style="height: 80%; background-color: #fff">
<el-tree
show-checkbox
:check-on-click-node="true"
:data="allMenu"
default-expand-all
node-key="id"
:expand-on-click-node="false"
:props="menuProps"
ref="menuTree"
:check-strictly="true">
</el-tree>
</el-scrollbar>
</div>
（2）js代碼如下：
data() {
return {
allMenu: [], // 全部菜單
menuProps: {
label: "menuname",
children: "children",
},
}
},
toTree() 為自己封裝的方法（數(shù)組轉成樹形結構數(shù)據(jù)）著拭，在我上一篇筆記有整理過
created(){
this.getAllMenu()
},
methods: {
// 獲取所有權限菜單
getAllMenu(){
menuList({}).then(res => {
if(res.code === 0) {
this.allMenu = toTree(res.data);
console.log(this.allMenu)
}else {
this.$message.error(res.message)
}
})
},
}
目前效果如圖：
樹形控件效果圖.png
2、自定義樹形控件節(jié)點內容（詳細的使用方法可參考element官網(wǎng)）牍帚，官網(wǎng)有兩種方法自定義render-content和scoped slot都可以達到效果儡遮，我這里使用的是第二種作用域插槽。
（1）為第三級的節(jié)點加上‘especially’類名暗赶，vue代碼如下：
<el-tree
show-checkbox
:check-on-click-node="true"
:data="allMenu"
default-expand-all
node-key="id"
:expand-on-click-node="false"
:props="menuProps"
ref="menuTree"
:check-strictly="true">
<!-- 自定義節(jié)點內容 -->
<span class="custom-tree-node" slot-scope="{ node, data }" >
<span :class="(node.level == 3)? 'especially':''">{{ node.label }}</span>
</span>
</el-tree>
（2）dom操作修改節(jié)點樣式鄙币，js代碼如下：
watch: {
// 監(jiān)聽權限菜單tree是否渲染完
allMenu: function () {
this.$nextTick(() => {
this.changeTreeClass()
})
},
},
methods: {
// 改變tree節(jié)點樣式
changeTreeClass() {
// 找到之前做標記的class
var classDomList = document.getElementsByClassName('especially')
// 改變這幾個樣式
for (var i = 0; i < classDomList.length; i++) {
classDomList[i].parentNode.parentNode.style.cssText = 'width: auto;border: none;'
classDomList[i].parentNode.parentNode.parentNode.style.cssText = 'border: none;'
classDomList[i].parentNode.parentNode.nextSibling.style.cssText = 'display: none;'
}
},
}
（3）less代碼如下：
<style lang="less" scoped>
.table {
overflow: auto;
height: 100%;
/deep/.el-tree {
.el-tree-node__content {
border-bottom: 1px #000000 solid;
padding: 5px 10px !important;
width: 140px;
height: auto;
.el-tree-node__expand-icon.el-icon-caret-right{
display: none;
}
}
.el-tree-node {
padding: 0 !important;
display: flex;
}
.el-checkbox.is-disabled.is-checked {
.el-checkbox__inner{
background-color: #363554 !important;
border-color: #363554 !important;
}
}
.el-tree-node__children {
display: flex;
flex-direction: column;
.el-tree-node{
display: flex;
padding: 0px !important;
border-bottom: 1px #000000 solid;
.el-tree-node__content{
width: 200px;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-bottom: none;
.custom-tree-node {
height: 24px;
display: flex;
align-items: center;
.tree-btn {
margin-left: 10px;
display: none;
}
.el-button{
padding: 0px !important;
border-radius: 4px;
background: #363554;
color: #ffffff;
}
}
}
.el-tree-node__children{
width: 580px;
flex-direction: row;
flex-wrap: wrap;
}
}
.el-tree-node.is-checked{
.tree-btn {
display: block !important;
}
}
}
}
}
</style>
完成效果圖.png
