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

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);

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

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

相关文章:

  • Kaggle比赛入门攻略(以 Titanic 为例)
  • 【KWDB 创作者计划】_深度解析KWDB存储引擎
  • C++负载均衡远程调用学习之基础TCP服务
  • 如何做表征对齐?
  • 艺术与科技的双向奔赴——高一鑫荣获加州联合表彰
  • C# 类的基本概念(从类的内部访问成员和从类的外部访问成员)
  • PXI总线开关卡80个交叉点组成的中密度 PXI矩阵开关模块
  • WPF框架中常用算法
  • BT137-ASEMI机器人功率器件专用BT137
  • 【论文阅读】APMSA: Adversarial Perturbation Against Model Stealing Attacks
  • LeetCode209_长度最小的子数组
  • MCP 自定义python实现server服务,支持离线调用和远程接口访问形式
  • Flink之DataStream
  • ActiveMQ 可靠性保障:消息确认与重发机制(一)
  • ActiveMQ 可靠性保障:消息确认与重发机制(二)
  • ag-grid-react 列表导出csv列表getDataAsCsv (自定义导出列表配置)自定义新增,修改导出内容
  • 使用模块中的`XPath`语法提取非结构化数据
  • 单体项目到微服务的架构演变与K8s发展是否会代替微服务
  • 【SpringBoot】基于mybatisPlus的博客系统
  • windows系统 压力测试技术
  • 夜读丨春天要去动物园
  • 擦亮“世界美食之都”金字招牌,淮安的努力不止于餐桌
  • 交通运输部:预计今年五一假期全社会跨区域人员流动量将再创新高
  • 绿地控股:今年一季度营业收入356亿元,中高层管理人员带头降薪
  • 西湖大学独家回应本科招生走出浙江:经过三年试点,条件成熟
  • 四川省社科联期刊:不建议在读硕士、博士将导师挂名为第一作者