步驟：
定義模板（做循環(huán)遍歷處理）：
<template>
<div class="container">
<el-card v-for="(item,index) in routeList" :key="index" class="routeList-box">
<!-- <el-collapse v-model="activeNames">
<el-collapse-item :title="item.title" :name="index"> -->
<el-tree
ref="tree"
class="el-tree"
show-checkbox
node-key="id"
:indent="0"
:data="item.list"
:props="defaultProps"
:highlight-current="true"
:default-expand-all="true"
:render-content="renderContent"
@node-expand="handleExpand"
/>
<!--:indent="0"為相鄰級節(jié)點間的水平縮進(jìn)，單位為像素，如果要加指示線需設(shè)置為0，否則縮進(jìn)會很大-->
<!-- </el-collapse-item>
</el-collapse> -->
</el-card>
</div>
</template>
tree的參數(shù)說明請參考官方文檔el-tree
定義模板數(shù)據(jù)：
data() {
return {
routeList: [
{
// title: '授權(quán)管理后臺',
list: [
{
id: 1,
label: '工程管理', //一級控件
children: [
{
id: 2,
label: '物料管理', //二級控件
children: [
{
id: 4,
label: '列表查看', //三級控件
// children: [
// {
// id: 7,
// label: '頁面查看權(quán)限' //四級控件
// },
// {
// id: 8,
// label: '編輯'
// }
// ]
},
{
id: 5,
label: '查詢',
// children: [
// {
// id: 9,
// label: '次數(shù)分布child1'
// },
// {
// id: 10,
// label: '次數(shù)分布child2'
// }
// ]
}
]
},
{
id: 3,
label: '工藝流程管理',
children: [
{
id: 6,
label: '列表查看',
// children: [
// {
// id: 7,
// label: '頁面查看權(quán)限'
// }
// ]
},
{
id: 7,
label: '查詢',
// children: [
// {
// id: 7,
// label: '頁面查看權(quán)限'
// }
// ]
}
]
}
]
},
{
id: 111,
label: '銷售管理',
children: [
{
id: 112,
label: '訂單管理',
children: [
{
id: 113,
label: '列表查看'
},
{
id: 114,
label: '查詢'
},
{
id: 114,
label: '重置'
},
{
id: 114,
label: '復(fù)選框'
},
{
id: 114,
label: '新增訂單'
},
{
id: 114,
label: '導(dǎo)出'
},
{
id: 114,
label: '打印'
},
{
id: 114,
label: '操作'
},
{
id: 114,
label: '訂單詳情'
},
{
id: 114,
label: '編輯'
},
{
id: 114,
label: '作廢'
},
{
id: 114,
label: '出庫'
},
{
id: 114,
label: '結(jié)束'
}
]
}
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
}
}
js部分：
mounted() {
this.changeCss() //默認(rèn)調(diào)用此方法將子節(jié)點渲染為橫向排列
},
methods: {
handleExpand() { // 節(jié)點被展開時觸發(fā)的事件
// 因為該函數(shù)執(zhí)行在renderContent函數(shù)之前，所以得加this.$nextTick()
this.$nextTick(() => {
this.changeCss()
})
},
renderContent(h, { node, data, store }) { // 樹節(jié)點的內(nèi)容區(qū)的渲染 Function
let classname = ''
// 由于項目中有三級菜單也有四級級菜單，就要在此做出判斷
if (node.level === 4) {
classname = 'foo'
}
if (node.level === 3 && node.childNodes.length === 0) {
classname = 'foo'
}
return h(
'p',
{
class: classname
},
node.label
)
},
changeCss() { //將子節(jié)點橫向排列方法
var levelName = document.getElementsByClassName('foo') // levelname是上面的最底層節(jié)點的名字
for (var i = 0; i < levelName.length; i++) {
// cssFloat 兼容 ie6-8 styleFloat 兼容ie9及標(biāo)準(zhǔn)瀏覽器
levelName[i].parentNode.style.cssFloat = 'left' // 最底層的節(jié)點，包括多選框和名字都讓他左浮動
levelName[i].parentNode.style.styleFloat = 'left'
levelName[i].parentNode.onmouseover = function() {
this.style.backgroundColor = '#fff'
}
}
}
}
指示線樣式部分：
<style scoped lang="scss">
// 樹樣式
.el-tree{
::v-deep .el-tree-node{
position: relative;
padding-left: 16px; // 縮進(jìn)量
}
::v-deep .el-tree-node__children{
padding-left: 16px; // 縮進(jìn)量
}
// 豎線
::v-deep .el-tree-node::before{
content:"";
height: 100%;
width: 1px;
position: absolute;
left: -3px;
top: -26px;
border-width: 1px;
border-left: 1px dashed #ccc;
}
// 當(dāng)前層最后?個節(jié)點的豎線?度固定
::v-deep .el-tree-node:last-child::before{
height: 38px; // 可以??調(diào)節(jié)到合適數(shù)值
}
// 橫線
::v-deep .el-tree-node::after{
content:"";
width: 24px;
height: 20px;
position: absolute;
left: -3px;
top: 12px;
border-width: 1px;
border-top: 1px dashed #ccc;
}
// 去掉最頂層的虛線，放最下?樣式才不會被上?的覆蓋了
& > ::v-deep .el-tree-node::after{
border-top: none;
}
& > ::v-deep .el-tree-node::before{
border-left: none;
}
// 展開關(guān)閉的icon
::v-deep .el-tree-node__expand-icon{
font-size: 16px;
// 葉?節(jié)點（??節(jié)點）
::v-deep &.is-leaf{
color: transparent;
// display: none; // 也可以去掉
}
}
}
</style>
實際效果：文章來源：http://www.zghlxwxcb.cn/news/detail-511941.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-511941.html
到了這里，關(guān)于VUE element-ui之el-tree樹形控件循環(huán)遍歷渲染dom節(jié)點；子節(jié)點橫向排列；控件添加指示線的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
