vue3 element plus el-tree树形控件懒加载默认展开

最新推荐文章于 2024-05-27 11:11:45 发布

佐武

最新推荐文章于 2024-05-27 11:11:45 发布

阅读量2.5k

点赞数 1

分类专栏： vue 文章标签： vue.js elementui Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_50587417/article/details/129522124

版权

vue 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

这里有一个主要点：异步异步

废话不多说直接上代码：三步骤

第一步：

<el-tree
    :props="props"
    :load="loadNode"
    lazy
    :default-expanded-keys="a"    //重点，使用变量代替
  />

第二步:

<script setup>
let treeData = ref([
  {
    id: 1,
    name: '我是第一层',
    children: [],
  },
])
let a = ref() //第二步，定义变量  默认展开

// 获取数据
const loadNode = async (node, resolve) => {
  // 根节点
  if (node.level === 0) {
    resolve(treeData.value)
    a.value = [1]    //第三步，赋值数据以后再展开 重点
    return
  }

  // 根节点展开数据
  if (node.level === 1) {
    console.log(node, resolve)
    // 获取数据
    let res = await treeselect2()
    // 存入数据
    treeData.value[0].children = res.data

    return resolve(res.data)
  }

  let unid = node.data.id
  let res = await treeselect(unid)
  console.log(res)

  return resolve(res.data)
}

</script>