elementPlus + table 树形懒加载,子节点的刷新

文章目录

    • 需求描述
    • 技术细节
    • 小结

需求描述

一个树形表格的增删查改

技术细节

刚开始想的很好,新增/编辑/删除时不调用接口,而是直接更改数据,如删除时,直接删除对应下标的数据
遇到的问题

  1. 实际业务中是否有子级,是不确定的-这个好解决,判断一下就行
  2. 通过load接口获取到的子项,使用proxy.$refs.table.store.states.lazyTreeNodeMap.value获取不到节点
  3. 通过proxy.$refs.table.store.states.treeData.value可以获取到节点数据,但是不能触发更新
  4. 最后使用了最简单的方式,新增,删除,编辑完成后,直接使用proxy.$refs.table.store.loadOrToggle(row)重新触发load调接口
<template><div><el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load":tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="table"><el-table-column prop="date" label="Date" /><el-table-column prop="name" label="Name" /><el-table-column prop="address" label="Address" /><el-table-column prop="address" label="Address" width="270"><template #default="scope"><el-button type="primary" size="small" @click="handleAdd(scope.row)">add</el-button><el-button type="primary" size="small" @click="handleAdd2(scope.row)">add2</el-button><el-button size="small" @click="handleEdit(scope.row)">Edit</el-button><el-button size="small" type="danger" @click="handleDelete(scope.row)">Delete</el-button></template></el-table-column></el-table></div>
</template>
<script setup>
import {onMounted,ref,getCurrentInstance} from 'vue';
const {proxy} = getCurrentInstance();const handleEdit = ((row) => {console.log(row)
})
const handleDelete = ((row) => {console.log(row)
})
const handleAdd = ((row) => {
console.log(proxy.$refs.table.store.states.treeData.value)
console.log(proxy.$refs.table.store.states.lazyTreeNodeMap.value)// proxy.$refs.table.store.states.treeData.value[row.id].loaded = false;proxy.$refs.table.store.states.treeData.value[row.id].loaded = falseproxy.$refs.table.store.loadOrToggle(row)
})
const handleAdd2 = ((row) => {})
const load = (row,treeNode,resolve
) => {console.log(row)setTimeout(() => {resolve([{id: `${row.id}_31`,date: '2016-05-01',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',hasChildren: true,},{id: `${row.id}_32`,date: '2016-05-01',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',hasChildren: true,},])}, 1000)
}const tableData1 = [{id: 11,date: '2016-05-02',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',hasChildren: true,},{id: 2,date: '2016-05-04',name: 'wangxiaohu',hasChildren: true,address: 'No. 189, Grove St, Los Angeles',},{id: 3,date: '2016-05-01',name: 'wangxiaohu',hasChildren: true,address: 'No. 189, Grove St, Los Angeles',},{id: 4,date: '2016-05-03',name: 'wangxiaohu',hasChildren: true,address: 'No. 189, Grove St, Los Angeles',},
]
</script>

小结

关键点在于:proxy.$refs.table.store.loadOrToggle(row)

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

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

相关文章

vue3 如何调用第三方npm包内部的 pinia 状态管理库方法

抛砖引玉: 如果在开发vue3项目是, 引用了npm第三方包 ,而且这个包内使用了Pinia 状态管理库,那我们如何去调用 npm内部的 Pinia 状态管理库呢? 实际遇到的问题: 今天在制作npm包时遇到的问题,之前Vue2版本的时候状态管理库用的Vuex ,当时调用npm包内的状态管理库很简单,直接引…

Linux笔记---调试工具GDB(gdb)

1. gdb的概念 GDB&#xff0c;全称GNU Debugger&#xff0c;是一个功能强大的开源调试工具&#xff0c;广泛用于Unix和类Unix系统&#xff0c;以及Microsoft Windows和macOS平台。GDB允许开发者在程序执行过程中查看内部运行情况&#xff0c;帮助定位和修复程序中的错误。 gd…

WSL2 ubuntu配置redis

安装redis sudo apt-get update sudo apt-get install redis启动redis-server sudo service redis-server start访问redis sudo redis-cli修改redis配置 su # root用户 vim /etc/redis/redis.conf找到# requirepass foobared&#xff0c;将这行去掉注释&#xff0c; fooba…

FFmpeg源码:avio_read_partial函数分析

AVIOContext结构体和其相关的函数分析&#xff1a; FFmpeg源码&#xff1a;avio_r8、avio_rl16、avio_rl24、avio_rl32、avio_rl64函数分析 FFmpeg源码&#xff1a;read_packet_wrapper、fill_buffer函数分析 FFmpeg源码&#xff1a;avio_read函数分析 FFmpeg源码&#xff…

编译器gcc/g++

gcc 只用来编译C g 编译C/C 1.预处理&#xff08;进行宏替换/去注释/条件编译/头文件展开等&#xff09; 先创建 code.c 文件 -E --> 从现在开始&#xff0c;进行程序的翻译&#xff0c;一旦预处理做完&#xff0c;就停下来 -o --> 表明 -o 后面的文件名称 code…

wordpress建DTC独立站为产品添加价格区间选择

要在WordPress中为DTC独立站的产品添加价格区间选择功能&#xff0c;可以通过以下步骤实现&#xff1a; 添加自定义字段&#xff1a;首先&#xff0c;需要在产品后台添加一个自定义字段&#xff0c;用于设置价格区间的最大值。这可以通过添加代码到子主题的 function.php 文件…

一.安装版本为19c的Oracle数据库管理系统(Oracle系列)

1.数据库版本信息&#xff1a; 版本信息&#xff1a; 或者直接由命令查出来&#xff1a; 2.操作系统的版本信息 3.安装包下载与上传 可以去oracle官网下载也可以从其他人的百度网盘链接中下载&#xff1a; 使用xftp工具或者其他的工具&#xff08;mobaxterm&#xff09;上传到l…

DimensionX 部署笔记

目录 生成视频用CogVideoX-5b-I2V 推理代码&#xff1a; DimensionX 生成视频用CogVideoX-5b-I2V 推理代码&#xff1a; 可以生成&#xff0c;从左向右旋转的&#xff0c;也可以生成从上往下旋转的&#xff1a; import torch from diffusers import CogVideoXImageToVideo…

uni-app移动端与PC端兼容预览PDF文件

过程遇到的问题 1、如果用的是最新的版本的pdfjs的话&#xff0c;就会报Promise.withResolvers 不是一个方法的错误&#xff0c;原因是Promise.withResolvers是ES15新特性&#xff0c;想了解可参考链接&#xff0c;这里的解决方案是将插件里的涉及到Promise.withResolvers的地…

Node.js | Yarn下载安装与环境配置

一、安装Node.js Yarn 是 Node.js 下的包管理工具&#xff0c;因此想要使用 Yarn 就必须先下载 Node.js。 推荐参考&#xff1a;Node.js | npm下载安装及环境配置教程 二、Yarn安装 打开cmd&#xff0c;输入以下命令&#xff1a; npm install -g yarn检查是否安装成功&…

简单的卡尔曼滤波器C#代码

用卡尔曼滤波来平滑温度数据&#xff0c;使得温度曲线变得更加平滑&#xff08;即去噪声&#xff0c;避免短期内的剧烈波动&#xff09;。在这种情况下&#xff0c;卡尔曼滤波的目标是基于传感器的噪声数据来估计真实的温度&#xff0c;从而降低噪声的影响。 简单的温度卡尔曼…

开源TTS语音克隆神器GPT-SoVITS_V2版本地整合包部署与远程使用生成音频

文章目录 前言1.GPT-SoVITS V2下载2.本地运行GPT-SoVITS V23.简单使用演示4.安装内网穿透工具4.1 创建远程连接公网地址 5. 固定远程访问公网地址 前言 本文主要介绍如何在Windows系统电脑使用整合包一键部署开源TTS语音克隆神器GPT-SoVITS&#xff0c;并结合cpolar内网穿透工…

分布式系统学习笔记

除了分布式爬虫系统&#xff0c;还有许多分布式系统值得学习和实践&#xff0c;它们在不同领域有广泛应用&#xff0c;积累相关经验对找工作非常有帮助。以下是一些常见的分布式系统类型及学习建议&#xff1a; 1. 分布式存储系统 应用场景&#xff1a; 大规模数据的存储与访…

[Docker#11] 容器编排 | .yml | up | 实验: 部署WordPress

目录 1. 什么是 Docker Compose 生活案例 2. 为什么要使用 Docker Compose Docker Compose 的安装 Docker Compose 的功能 使用步骤 核心功能 Docker Compose 使用场景 Docker Compose 文件&#xff08;docker-compose.yml&#xff09; 模仿示例 文件基本结构及常见…

鸿蒙NEXT应用示例:切换图片动画

【引言】 在鸿蒙NEXT应用开发中&#xff0c;实现图片切换动画是一项常见的需求。本文将介绍如何使用鸿蒙应用框架中的组件和动画功能&#xff0c;实现不同类型的图片切换动画效果。 【环境准备】 电脑系统&#xff1a;windows 10 开发工具&#xff1a;DevEco Studio NEXT B…

Spring Cloud Gateway(分发请求)

Spring Cloud Gateway 的过滤器和 Spring MVC 的拦截器的区别 过滤器用于整个微服务系统的网关层控制&#xff0c;拦截器则用于单个微服务内部的控制层请求处理。 1. 作用范围 Spring Cloud Gateway 过滤器&#xff1a;过滤器的作用范围是在网关层&#xff0c;主要在请求进入后…

【spring 】Spring Cloud Gateway 的Filter学习

介绍和使用场景 Spring Cloud Gateway 是一个基于 Spring Framework 5 和 Project Reactor 的 API 网关&#xff0c;它旨在为微服务架构提供一种简单而有效的方式来处理请求路由、过滤、限流等功能。在 Spring Cloud Gateway 中&#xff0c;Filter 扮演着非常重要的角色&#…

opencv(c++)图像的灰度转换

opencv(c)图像的灰度转换 quickopencv.h #pragma once #include <opencv2/opencv.hpp> using namespace cv; class QuickDemo { public:void colorSpace_Demo(Mat& image); };quickopencv.cpp #include "quickopencv.h"// QuickDemo类中的颜色空间演示函…

problem forward和solution backward有什么区别

Note: 在具体研究中&#xff0c;problem forward是先提出问题&#xff0c;然后围绕着科学问题设计出完美的解决方案&#xff1b;而solution backward是先盘算自己有哪些技术&#xff0c;有哪些解决方案&#xff0c;反过来去寻找和定义问题。

C++构造函数详解

构造函数详解&#xff1a;C 中对象初始化与构造函数的使用 在 C 中&#xff0c;构造函数是一种特殊的成员函数&#xff0c;它在创建对象时自动调用&#xff0c;用来初始化对象的状态。构造函数帮助我们确保每个对象在被创建时就处于一个有效的状态&#xff0c;并且在不传递任何…