树形结构及数据:
主要是通过node-key="id"和 :default-expanded-keys="isArr"
根据isArr中存放的id值将isArr存在的id数据进行展开处理
<el-tree
ref="tree"
:data="deptOptions"
node-key="id"
:default-expanded-keys="isArr"
:props="treeProps"
:show-checkbox="ischeckbox"
:expand-on-click-node="false"
:default-expand-all="false"
:check-strictly="false"
:filter-node-method="filterNode"
:default-checked-keys="['']"
@node-click="handleCheckChange"
highlight-current
/>
//因为我们这里的树形结构是作为子组件的,接收的父组件传递过来的值
//deptOptions这个就是数据
//isArr这个是存放需要默认展开的数据
export default {
props: {
"deptOptions": {
type: Array,
default: []
},
"ischeckbox": {
default: false
},
"isArr":{
type: Array,
default: []
}
},
data() {
return {}
}
isArr数据获取方式:
//html代码块
<template>
<el-container style="height: 100%; width: 100%">
<div style=" height: 100%">
<treeSingleSelection :dept-options="deptOptions" :is-arr="isArr"/>
</div>
//data中定义的数据
data() {
return {
deptOptions: [],
isArr:[],}
}
//获取isArr的方法
//因为我们想要的效果是默认展开到第三层,所以这里再进行递归时,将前三层的数据push到isArr中即可
getTreeData() {
queryWellTree().then((res) => {
const wells = this.recursion(res.data)
this.deptOptions = res.data;
})
},
recursion(datas, level = 0) {
const wells = [];
for (const data of datas) {
if ('company' == data.type && level == 0) {
this.isArr.push(data.id)
wells.push({
id: data.id,
name: data.name,
children: data.children ? this.recursion(data.children, level + 1) : null, // 递归处理当前层级的子节点
});
} else if ('org' == data.type && level == 1) {
this.isArr.push(data.id)
wells.push({
id: data.id,
name: data.name,
children: data.children ? this.recursion(data.children, level + 1) : null, // 递归处理当前层级的子节点
});
} else if ('ogf' == data.type && level == 2) {
this.isArr.push(data.id)
wells.push({
id: data.id,
name: data.name,
children: data.children ? this.recursion(data.children, level + 1) : null, // 递归处理当前层级的子节点
});
} else if ('platform' == data.type && level == 3) {
wells.push({
id: data.id,
name: data.name,
children: data.children ? this.recursion(data.children, level + 1) : null, // 递归处理当前层级的子节点
});
} else if ('well' == data.type && level == 4) {
wells.push({
id: data.id,
name: data.name,
children: data.children ? this.recursion(data.children, level + 1) : null, // 递归处理当前层级的子节点
});
} else if ('layer' == data.type && level == 5) {
wells.push({
id: data.id,
name: data.name,
children: null,
});
}
}
return wells;
},