el-tree 懒加载情况下默认展示前两层数据

因为饿了么tree组件不具备展示特定层级的功能,所以此功能顺序栈手动添加完成

 <el-tree
            ref="refOrgTree"
            v-bind="attrs"
            class="container-tree"
            accordion
            lazy
            :data="treeData"
            :load="loadNode"
            node-key="value"
            :props="treeProps"
            :default-expanded-keys="defaultExpandKeys"//最重要的,必须有
            @node-click="handleNodeClick"
          />

因为要展示前两层,所以前两层数据,在你一进页面就必须存在,所以这里要在data里写好前两层的数据,后续层级可以使用懒加载

然后在你获取前两层数据方法里面,指定特定的default-expanded-keys:

const defaultExpandKeys = ref<any[]>([]);

async function initTreeData() {
  const rootNode = [
    {
      level: -1,
      value: curSelectAreaInfo.value?.id,
      label: curSelectAreaInfo.value?.name
    }
  ];

//获取第二层数据
    const res: any = await getChildrenOrgList(curSelectAreaInfo.value?.id);
    const children = res.data.map(cur => ({
      ...cur,
      level: 0,
      value: cur.areaId,
      label: cur.areaName
    }));
    if (children.length > 0) {
//添加到children里面
      rootNode[0].children = children;
    }
    treeData.value = rootNode;
//设置默认选取第一条数据
  nextTick(() => {
    setSelectedData(rootNode[0]["value"], true);
    params.value.areaId = rootNode[0].value;
    selected.value = rootNode[0].value;
  });
//设置展开层级的key
  defaultExpandKeys.value = [rootNode[0].value].filter(o => o);//这里!!!!!!!!!!
  console.log("init tree", rootNode);
}

希望我的描述对你有所帮助!!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值