<template>
<div >
<el-tree :data="dataDealwith" :props="defaultProps">
<span slot-scope="{ node, data }">
<span :>{{ node.label }}</span>
</span>
</el-tree>
</div>
</template>
<script>
export default {
computed: {
dataDealwith(){
var data = this.data;
function setGrayNode(data){ //遍历树 获取id数组
for(var i=0;i<data.length;i++){
if(data[i].statusIsIncorrect == 'yes'){// 如果某一个节点是禁用的，它的所有子节点都应该禁用
setChildrenGray(data[i].children)//子节点传给另一个函数专门用来改数据
continue;
} else {
if(data[i].children){// 如果当前节点有子节点，就递归调用一次
setGrayNode(data[i].children);
}
}
}
}
function setChildrenGray(data){
for(var n=0;n<data.length;n++){
data[n].statusIsIncorrect = 'yes';// 子节点先置灰
if(data[n].children && data[n].children.length > 0){
setChildrenGray(data[n].children)
}
}
}
setGrayNode(data)
return data;
}
},
data() {
return {
data: [
{
label: "一级 1",
id: "1",
children: [
{
label: "二级 1-1",
id: "1.1",
children: [
{
label: "三级 1-1-1",
id: "1.1.1"
}
]
}
]
},
{
label: "一级 2",
id: "2",
statusIsIncorrect: 'yes',
children: [
{
label: "二级 2-1",
id: "2.1",
children: [
{
label: "三级 2-1-1",
id: "2.1.1"
}
]
},
{
label: "二级 2-2",
id: "2.2",
children: [
{
label: "三级 2-2-1",
id: "2.2.1"
}
]
}
]
},
{
label: "一级 3",
id: "3",
children: [
{
label: "二级 3-1",
id: "3.1",
children: [
{
label: "三级 3-1-1",
id: "3.1.1"
}
]
},
{
label: "二级 3-2",
id: "3.2",
children: [
{
label: "三级 3-2-1",
id: "3.2.1"
}
]
}
]
}
],
defaultProps: {
children: "children",
label: "label"
},
};
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.mainPage {
padding: 20px;
color: #000;
.el-tree {
margin-top: 10px;
font-size: 18px;
.ccfont1 {color: #aaa;}
}
}
</style>
