当前位置: 首页 > java >正文

Vue:el-table-tree懒加载数据

目录

  • 一、出现场景
  • 二、具体使用
  • 三、修改时重新加载树节点
  • 四、新增、删除重新加载树节点


一、出现场景

在项目的开发过程中,我们经常会使用到表格树的格式,但是犹豫数据较多,使用分页又不符合项目需求时,就需要对树进行懒加载的操作。

二、具体使用

<template>
<div><el-table:data="tableData1"style="width: 100%"row-key="id"borderlazy:load="load":tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</div>
</template>
<script>export default {data() {return {tableData1: [{id: 1,date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: 2,date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {id: 3,date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',hasChildren: true}, {id: 4,date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}},methods: {load(tree, treeNode, resolve) {setTimeout(() => {resolve([{id: 31,date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {id: 32,date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}])}, 1000)}},}
</script>

三、修改时重新加载树节点

this.currentRow:在修改时选中的数据
this.form:修改之后的数据

Object.assign(this.currentRow, this.form);

四、新增、删除重新加载树节点

在新增和修改的时候重新加载树节点,我这里提供的是重新加载整个树节点,如何修改缓存还没有很好的方法,网上查询了一些例子也没有实现,哪位大佬有好的解决方案一块分享一下的,万分感谢!!!

http://www.xdnf.cn/news/3131.html

相关文章:

  • DeepSeek-Prover-V2-671B最新体验地址:Prover版仅适合解决专业数学证明问题
  • Windows系统编译支持GPU的llama.cpp
  • 蓝桥杯 序列计数
  • 在VTK中使用VTKCamera
  • 2025年4月通信科技领域周报(4.21-4.27):6G标准加速推进 空天地一体化网络进入实测阶段
  • QT项目----电子相册(5)
  • UDP/TCP协议知识及相关机制
  • 【Java面试笔记:进阶】29.Java内存模型中的happen-before是什么?
  • AI开发者的Docker实践:汉化(中文),更换镜像源,Dockerfile,部署Python项目
  • 在TensorFlow中,`Dense`和`Activation`是深度学习模型构建里常用的层
  • ARM 指令集(ubuntu环境学习) 第一章:ARM 指令集概述
  • 基于Docker Compose的Prometheus监控系统一键部署方案
  • 数据库被渗透怎么办?WAF能够解决数据库被渗透的问题吗
  • DB-GPT V0.7.1 版本更新:支持多模态模型、支持 Qwen3 系列,GLM4 系列模型 、支持Oracle数据库等
  • 闪电贷攻击方式
  • 删除k8s某命名空间,一直卡住了怎么办?
  • 【开源工具】Python打造智能IP监控系统:邮件告警+可视化界面+配置持久化
  • 一、Javaweb是什么?
  • 使用skywalking进行go的接口监控和报警
  • 01 mysql 安装(Windows)
  • Arthas 使用攻略
  • 弹窗探索鸿蒙之旅:揭秘弹窗的本质与奥秘
  • 量子机器学习中的GPU加速实践:基于CUDA Quantum的混合编程模型探索
  • LangChain4j(15)——RAG使用4
  • FUSE 3.0.0 | 聚合7大直播平台的免费电视直播软件,支持原画清晰度及弹幕、收藏功能
  • 每日算法-250430
  • 算法-冒泡排序
  • 服务器丢包率测试保姆级教程:从Ping到网络打流仪实战
  • 毕业论文 | 基于C#开发的NMEA 0183协议上位机
  • 中科院1区top期刊2025年新算法:动麦优化算法(Animated Oat Optimization ,AOO)应用于二维三维无线传感器网络WSN