vue3如何使用element-plus中的 el-tree的懒加载

最新推荐文章于 2025-04-15 23:21:00 发布

划水运动员9527

最新推荐文章于 2025-04-15 23:21:00 发布

阅读量3.5k

点赞数

分类专栏： vue3 文章标签： vue-cli3 elementui treeview

本文链接：https://blog.youkuaiyun.com/qq_37449852/article/details/120509202

版权

vue3 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue3中使用el-tree组件实现树状懒加载，并通过hooks设计数据请求和操作逻辑。通过fetchMaterial函数封装分类数据获取，结合loadNode事件处理节点加载，同时展示了如何管理和更新数据以驱动操作组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
需求描述：一个 tree结构的分类列表，因为层级和每层有多少个分类不做限制，所以采取了el-tree的懒加载方式，每个分类的右侧有一些操作（操作的显示规则与本文无关，暂不做介绍），那么按照vue3中的思想，应该把把获取 tree数据的方法、以及分类的操作写入 hooks。

俩文件： home.vue（写dom元素） materail.js (进行hooks分装)

el-tree懒加载介绍：与 vue2 一样，都是通过 loadNode 事件开始。loadNode函数有俩参数node和 resolve, node里面包含的是当前节点以及他父节点和子节点的信息， resolve是一个函数，将获取到的数据进行包裹给tree进行渲染。

思路：在 materail.js 文件中封装一个名字为 fetchMaterial 的请求分类函数暴露出来

import handleMaterail from '../js/materail'
export default {
   setup () {
       let storeResolve = ref({})
       const { fetchMaterial } = handleMaterail()
       // 通过 loadNode 函数对数据进行请求和包裹
       const loadNode = (node, resolve) => {
	      console.log('loadNode', loadNode)
	      storeResolve = resolve // 对resolve进行存储
	      if (node.level * 1 === 0) {
	        fetchMaterial('')
	      } else {
	        fetchMaterial(node.data.categoryId * 1)
	      }
	  }
   }
}

上面是将请求数据的函数 fetchMaterial 函数结构出来，然后再 loadNode 中进行请求，但是这时候他请求玩的数据依旧再 hooks文件 materail.js 中，然后再通过结构的方式将数据暴露出来

const { fetchMaterial, materialList } = handleMaterail()

materialList 就是用来保存数据的，之后通过监听的方式对数据进行包裹

// 保存 resolve
watch(materialList, (newValue, oldValue) => {
  storeResolve(newValue)
})

之后将 loadNode 对外进行暴露

return {
  loadNode,
  materialConfig,
  treeDefaultProps
}

material.js 文件

import { ref } from 'vue'
import {
  getCategoryInfo
} from '../api/create.js'

export default function handleMaterail () {
  const materialList = ref([])
  const fetchMaterial = async (id) => {
    const response = await getCategoryInfo({
      lang: 'en',
      categoryId: id || ''
    })
    materialList.value = response.data
  }

  return {
    materialList,
    fetchMaterial
  }
}

后续：旁边的操作项可以按照这种方式继续开发下去，例如添加同级，就写一个方法，然后在里面进行获取数据函数调用，然后把这个方法暴露出去就ok啦