vue3如何使用element-plus中的 el-tree的懒加载_划水运动员9527的博客-程序员秘密

技术标签: elementui  vue3  treeview  vue-cli3  

在这里插入图片描述
需求描述: 一个 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啦

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37449852/article/details/120509202

智能推荐

关于485通信不稳定问题解决方案[STM32产品问题]_weixin_30302609的博客-程序员秘密

485通讯不稳定的问题(具体表现为有时能通讯上,有时通讯不上)RS485在连接设备过多、通讯距离过长、双绞线质量差,接线不规范等,都会导致通讯不稳定的问题。解决方案:一、关于485总线的几个概念:1、485总线的通讯距离可以达到1200米。根据485总线结构理论,在理想环境的前提下,485总线传输距离可以达到1200米。其条件是通讯线材优质达标,波特率为9600,只负载...

手把手教你如何利用树莓派和机器学习3D打印DIY一个车牌读取器_imalg图像算法的博客-程序员秘密

作者一直特斯拉迷,特斯拉的自动驾驶能力非常的酷,虽然没钱买,近来一直想让汽车能够检测和识别物体的想法,所以只能自己动手尽力一半实现该梦想。作者记录了项目中的每个步骤。步骤1.确定项目范围首先要考虑的是系统应该有什么。作者一直相信小做起总是最好的策略:循序渐进。所以,除了明显的车道保持任务(每个人都已经完成了)之外,作者只考虑在驾驶时清楚地识别车牌。识别过程包括两个步骤:车牌...

Unity实现模拟仿真飞机起飞降落效果_波波斯维奇的博客-程序员秘密_unity 无人机降落

Unity实现模拟仿真飞机起飞降落效果前言在最近的项目中,我实现了一个简单的飞机起飞、降落功能,运用了初中物理速度、加速度,以及Unity的Translate函数实现的。实现的难度一般,效果还可以,下面先说下飞机处于各个阶段的函数实现原理。实现原理1.起飞阶段如图所示,飞机在起飞的时候有一个向前的速度V1,有一个向上的速度V0,V1与V0都是从0逐渐加大到一定的速度,当飞机上升到一定高...

APK加壳【3】通用内存加载dex方案分析_weixin_34403693的博客-程序员秘密

本文引自我的博文 APK加壳【3】通用内存加载dex方案分析来源Andorid APK反逆向解决方案:梆梆加固原理探寻 CSDN 作者Jack_Jia该篇博文中的:“3. 如何使DexClassLoader加载加密的dex文件? ”这部分。方案上一篇实现的内存加载dex方案,具有Android系统版本的局限性。为...

定义斜体文本的html标签,HTML 文本格式化_xuliagn的博客-程序员秘密

全屏HTML文本格式化HTML 文本格式化html>速学堂(openketang.com)加粗文本斜体文本电脑自动输出这是下标和上标运行结果加粗文本斜体文本电脑自动输出这是下标和上标HTML 格式化标签HTML 使用标签 ("bold") 与 ("italic") 对输出的文本进行格式, 如:粗体or斜体这些HTML标签被称为格式化标签(请查看底部完整标签参考手册)。通...

HCIA-GaussDB学习笔记 第一章 数据库介绍_小可侠的博客-程序员秘密

HCIA-GaussDB第一章 数据库介绍1.1数据库技术概述第一章 数据库介绍1.1数据库技术概述学习目标:1.描述数据库技术相关概念;2.列举主要的关系型数据库;3.区别不同的关系型数据架构;4.描述并识别关系型数据库的主要应用场景。数据库是存放数据的仓库,是大量数据的集合。存放在数据库中数据的特点:1.永久存储 2.有组织 3.可共享数据库管理系统是一个能够科学地组织和存储数据,高效地获取和维护数据的系统软件,是位于用户与操作系统之间的数据管理软件。数据库管理系统主要功能包

随便推点

opencv学习笔记之三 IplImage结构体_丐帮二帮主的博客-程序员秘密

NOTE 1   :vc中 sizeof(char) = 1  ;  sizeof(int) = 2 ;  sizeof(float) = 4 ;  sizeof(double) = 8 ;按照字节显示,一字节是八位。NOTE 2   :图像的深度表示用来显示的图像划分的颜色种类数,colormap#define IPL_DEPTH_1U     1#define IPL_DE

《遥感原理与应用》总结—遥感图像几何处理_百年一遇大变局的博客-程序员秘密_遥感图像的几何处理

遥感图像几何处理重点:各类传感器的构像方程(物理模型、通用模型),图像的变形情况,图像纠正原理,图像纠正过程。1.遥感传感器的构像方程构像方程中的坐标系:传感器坐标系S-UVW:S为传感器投影中心,作为传感器坐标系的坐标原点,U轴的方向为遥感平台的飞行方向,W轴为传感器指向地底点方向的负方向,V轴垂直于WU平面,该坐标系描述了像点在控件的位置。地面坐标系O-XYZ:主要采用地心坐标系统。当传感器对地成像时,Z轴与原点处的天顶方向一样,XY平面与Z轴垂直。...

ISCSI 共享存储在RHEL5上的实现方法_MM22GG的博客-程序员秘密

本文转载于  http://ylw6006.blog.51cto.com/470441/580568 ISCSI 共享存储在RHEL5上的实现方法2011-06-03 15:35:14标签:iscsi共享存储 休闲 tgtd 盘阵版权声明:原创作品,谢绝转载!否则将追究法律责任。   近日辉总整理了在VMware环境下

超文本标记语言_weixin_33728268的博客-程序员秘密

超文本标记语言(英文:HyperTextMarkupLanguage,HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML被用来结构化信息——例如标题、段落和列表等等,也可用来在一定程度上描述文档的外观和语义。由蒂姆·伯纳斯-李给出原始定义,由IETF用简化的SGML(标准通用标记语言)语法进行进一步发展的HTML,后来成为国际标准,由万...

possibly undefined macro: AC_TYPE_SSIZE_T_clliu的博客-程序员秘密

在安装安装SIPp-3.3时遇一些问题:当执行 autoreconf -ivf出错:Can't exec "aclocal": No such file or directory at /usr/bin/autoreconf line 174.Use of uninitialized value in pattern match (m//) at /usr/

koa框架使用graphQL管理api_养只猫的博客-程序员秘密

首先说说graphQL。这是一个用来管理api接口的工具。应用场景如下:项目一期首页初始化接口A需要数据B和数据C两个参数到了项目二期首页初始化接口A需要的数据多了数据D少了数据B。这样后端接口A要相应的增加数据D和删除数据B,前端也要做相应的修改。多次迭代可能有需要加回数据B这样会做大量的无用功。graphQL能让后端添加需要新增的字段而不用删除不需要的字段并且前端只拿需要用的字段。这样前...

推荐文章

热门文章

相关标签