示例:只展开一级节点
代码实现:
element UI 文档
html代码
defaultExpandedArr 是重点 需要加node-key
<el-tree
:props="defaultProps"
:data="treeData"
:default-expanded-keys="defaultExpandedArr"
node-key="id"
ref="tree"
></el-tree>
js代码
export default {
data() {
return {
defaultProps: {
children: "children",
label: "label",
},
treeData: [],
defaultExpandedArr: [],
};
},
mounted() {
// 相当于请求接口
this.init();
},
methods: {
init() {
// 获取到接口数据 之后赋值
this.treeData = [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1",
},
{
id: 10,
label: "三级 1-1-2",
},
],
},
],
},
{
id: 2,
label: "一级 2",
children: [
{
id: 5,
label: "二级 2-1",
},
{
id: 6,
label: "二级 2-2",
},
],
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1",
},
{
id: 8,
label: "二级 3-2",
},
],
},
];
// 给 你想展开的数据 进行 push 到 defaultExpandedArr内
// 我这个展示的是一级的展开 在想往下级 可以继续循环嵌套之后循环children 进行push
this.treeData.forEach((item) => {
this.defaultExpandedArr.push(item.id);
});
},
},
};