vue的element ui使用el-table组件实现懒加载树、默认自动展开层级(一层,二层)、并且解决新增、删除、修改之后树节点不刷新问题

1.整体思路

  1. 问题:数据量太大了,导致接口返回数据时间较长。
  2. 解决: 将ElementUi中Table组件加载改为懒加载(查看文档)。
  3. 思路:初始化打开页面时只显示第一级菜单,用户点击展开菜单之后往后端发送请求,然后加载出一级子菜单;后台只用有一个根据菜单id查询他子菜单的接口就可以。
  4. 拓展问题对table树增删改查后,会存在table菜单节点不刷新问题,实际数据已经刷新。( 改成懒加载后, 加载很快.;但是子菜单加载一次之后就被缓存了,在怎么点击也不会重新去请求后台;这个也导致了在我们增删改排序等操作菜单之后, 页面对应的菜单节点没有更新, 实际数据已变更.; 整体刷新一下页面的话会显示正确, 不过不可能每次更新之后,强制刷新页面吧,这样交互效果很不好)。
    5.解决不刷新问题:刷新节点(修改了哪一行, 就拿到这一行数据的parentId, 然后去调用接口, 查到这个parentId下一级子菜单,查到数据之后塞回去就行了. 接口和页面加载的那个接口是复用的, 无非页面加载的时候parentId传的是0或者null)。
    6.关键
    this.$set(this.$refs.pointMultipleTable.store.states.lazyTreeNodeMap, key, data)// lazyTreeNodeMap: 就是this.$refs.table.store.states.lazyTreeNodeMap//  key:就是table-key,相当于父节点数据的id// data:就是子节点数据// this.$refs.pointMultipleTable注意这个pointMultipleTable是你的table属性:ref的名字
    //	步骤 :// 1、先给table标签添加一个ref="pointMultipleTable",ref可以自己随便自定义// 2、在点击父节点要添加一个子节点,或删除一个子节点后,已请求完后台接口后,拿到父节点id,和最新增删后的子节点数据xxxList// 3、最后调用 this.$set(this.$refs.table1.store.states.lazyTreeNodeMap, id, xxxList);//根据父节点id更新子节点数据
    

2. 代码实现

<template><div class="app-container"><el-table ref="pointMultipleTable" v-loading="loading" :data="deptList" row-key="deptId" :lazy="true" :load="load":tree-props="{ children: 'children', hasChildren: 'existSub' }" :expand-row-keys="expandRowKeys"@row-click="(row, column, e) => clickRowLoad(row, column, e)"><el-table-column prop="deptName" label="部门名称" min-width="260" /><el-table-column prop="orderNum" label="排序" /><el-table-column label="创建时间" align="center" prop="createTime" min-width="200"><template slot-scope="scope"><span>{{(scope.row.createTime)}}</span></template></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="200"><template slot-scope="scope"><el-button  size="mini" type="text" icon="el-icon-edit"@click.stop="handleUpdate(scope.row)">修改</el-button><el-button  size="mini" type="text" icon="el-icon-plus"@click.stop="handleAdd(scope.row)">新增</el-button><el-button  size="mini" type="text" icon="el-icon-delete"@click.stop="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table></div>
</template><script>
import {getDept,delDept,addDept,updateDept,lazyList
} from '@/api/manager/dept'// 设置循环的默认值,判断是否调用openTreeHandle,触发点击事件,使得节点展开
let index = 1
export default {name: 'deptTree',components: {},data() {return {expandRowKeys: [],parentId: '',type: '',// treeNodeMap: new Map(),// 遮罩层loading: true,// 表格树数据deptList: [],// 查询参数queryParams: {parentId: undefined}}},created() {// 部门列表this.getList()},methods: {/** 查询部门列表 懒加载 */getList() {this.loading = truelazyList(this.queryParams).then(response => {console.log(response, 'response查询部门列表')this.deptList = response.datathis.loading = false// 默认展开了deptList的第一层所有数据的下级数据(相当于自动点击了一次)this.openTreeHandle(this.deptList)})},// 点击列表懒加载load(tree, treeNode, resolve) {console.log(tree, 'tree')// 加载子节点时,对子节点进行赋值// this.treeNodeMap.set(tree.deptId, { tree, treeNode, resolve })this.queryParams.parentId = tree.deptIdlazyList(this.queryParams).then(res => {console.log(res.data, 'res.data')// deptList的第一层展开后,如果还想展开下面层级,就设置index且调用if的方法。// index <= 1 就表示第一层基础上再展开一层,index <= 2,表示第一层的基础上再展开2层,一次类推// 如果只要默认展开一层,则不要再调用openTreeHandle方法即可。注释掉下面的if的index相关。if (index <= 1) {this.openTreeHandle(res.data)}index++resolve(res.data)})},// 一、-------根据接口得到deptList,根据实际需要获取需要展开的节点的id,也就是table绑定的row-key属性值(如deptId)--------openTreeHandle(deptList) {const deptId = deptList ? deptList.map(item => (item.deptId).toString()) : []// expandRowKeys 可以通过该属性设置 Table 目前的展开行,需要设置 row-key 属性才能使用,该属性为展开行的 keys 数组// 这个必须配置,只有配置了这个,getElementsByClassName才能获取到对应的数据els,下面click事件才会触发this.expandRowKeys = this.expandRowKeys.concat(deptId)console.log(this.expandRowKeys, ' this.expandRowKeys')const els = document.getElementsByClassName('el-table__expand-icon el-table__expand-icon--expanded')this.$nextTick(() => {console.log(els, 'els')console.log(els.length, 'els.length')if (els.length > 0) {for (let i = 0; i < els.length; i++) {els[i].click()}}})},// 点击整行load (能够点击一行的任意位置都可以进行伸缩)clickRowLoad(r, c, e) {if (e.currentTarget && e.currentTarget.firstElementChild.firstElementChild.firstElementChild) {console.log(e.currentTarget, 'e.currentTarget')if (e.currentTarget.firstElementChild.firstElementChild.firstElementChild.tagName == 'DIV') {e.currentTarget.firstElementChild.firstElementChild.firstElementChild.click()} else {e.currentTarget.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.click()}}},/** 新增按钮操作(获取到当前的deptId作为parentId) */handleAdd(row) {console.log('新增按钮操作', row)// 获取对应的父级idthis.parentId = row.deptIdthis.type = 1//  .....................},/** 修改按钮操作(获取当前部门的父级的id,也就是parentId) */handleUpdate(row) {console.log('修改部门增', row)// 根据部门id 获取详情getDept(row.deptId).then(response => {console.log(response.data, 'response.data')// 最近的父级idthis.parentId = response.data.parentIdthis.type = 2//  .....................})},/** 提交按钮 */submitForm: function () {this.$refs['form'].validate(valid => {if (valid) {updateDept(this.form).then(response => {this.$modal.msgSuccess('修改成功')this.queryParams.parentId = null// 方式1:刷新tablethis.reflushtable()// 方式2、刷新table// this.refreshData()//  .....................})} else {addDept(this.form).then(response => {this.$modal.msgSuccess('新增成功')this.queryParams.parentId = null// 方式1:刷新tablethis.reflushtable()// 方式2、刷新table// this.refreshData()//  .....................})}})},// 刷新节点:方法1reflushtable() { // 解决菜单懒加载时.  更新,添加,删除 排序不更新的情况 (根据父级id获取子级数据)lazyList({parentId: this.parentId}).then(res => {console.log(res.data, 'res.data')this.$set(this.$refs.pointMultipleTable.store.states.lazyTreeNodeMap, this.parentId, res.data)// 展开父级节点if (this.type == 1) { // 新增const pid = this.parentId.toString()this.expandRowKeys = this.expandRowKeys.concat([pid])console.log(this.expandRowKeys, ' this.expandRowKeys-----')}})},// 如果对应节点没有展开过,那获取节点时候会出现获取不到情况(这个我暂时没有找到解决办法),//  this.treeNodeMap.get(this.parentId)找不到,在load中这个parentId没有存储过,故而获取不到。// 所以推荐使用上述方法1// 刷新节点:方法2refreshData() { // 获取节点const node = this.treeNodeMap.get(this.parentId)// 获取需要刷新节点const { tree, treeNode, resolve } = node// 重新加载子节点数据this.load(tree, treeNode, resolve)},/** 删除按钮操作 */handleDelete(row) {this.$confirm('是否确认删除数据项?', '警告', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(function () {return delDept(row.deptId)}).then(() => {this.queryParams.parentId = nullthis.$modal.msgSuccess('删除成功')// 方式1:刷新tablethis.reflushtable()// 方式2、刷新table// this.refreshData()//  .....................}).catch(() => { })}}
}
</script>

3. 效果图

在这里插入图片描述

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

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

相关文章

RT-Thread源码阅读(一)

前言 本文基于RT-Thread V4.1.1和STM32F103(Cortex-M3) 本文旨在理解RT-Thread设计的基本逻辑&#xff0c;为了让文章简短易懂&#xff0c;所以展出的源码都是精简过的&#xff0c;不会把开关中断&#xff0c;宏选择等放在讲解代码中。 可以看懂基本逻辑后查看源码领悟具体细…

编写递归算法,计算二叉树T中叶子结点的数目。

【题目】编写递归算法&#xff0c;计算二叉树T中叶子结点的数目。 二叉链表类型定义∶ typedef struct BiTNode { TElemType data; struct BiTNode *lchild,*rchild; } BiTNode,*BiTree; 要求实现下列函数∶ int Leaves(BiTree T); /* 计算二叉树T中叶子结点的数目*/ #include …

适当催一下没确认订单的国外客户

在一片美丽的森林里&#xff0c;住着两只小鸟。其中一只非常勤奋&#xff0c;每天都早早起床&#xff0c;练习飞翔和觅食。而另外一个小鸟却非常懒惰&#xff0c;每天总是赖在窝里&#xff0c;不愿意努力&#xff0c;懒惰的小鸟总是想&#xff1a;反正有那只勤奋的鸟儿在&#…

【Linux】初识Linux及几个基本指令

Hello everybody!算算时间我已经有一个多月没有更新啦&#xff01;因为本专业是纺织工程&#xff0c;所以一直在复习应付期末考试\(0^◇^0)/。那好&#xff0c;废话不多说。让我们进入今天的主题&#xff01; 关于Linux系统可能很多同学不是很熟悉&#xff0c;有的人可能听过&…

如何在网络爬虫中解决CAPTCHA?使用Python进行网络爬虫

网络爬虫是从网站提取数据的重要方法。然而&#xff0c;在进行网络爬虫时&#xff0c;常常会遇到一个障碍&#xff0c;那就是CAPTCHA&#xff08;全自动公共图灵测试以区分计算机和人类&#xff09;。本文将介绍在网络爬虫中解决CAPTCHA的最佳方法&#xff0c;并重点介绍CapSol…

华为OD机试真题-分配土地-Python-OD统一考试(C卷)

题目描述&#xff1a; 从前有个村庄&#xff0c;村民们喜欢在各种田地上插上小旗子&#xff0c;旗子上标识了各种不同的数字。某天集体村民决定将覆盖相同数字的最小矩阵形的土地的分配给为村里做出巨大贡献的村民&#xff0c;请问&#xff0c;此次分配土地&#xff0c;做出贡献…

软件测试|使用matplotlib绘制多种饼图

简介 Matplotlib是一个强大的数据可视化库&#xff0c;它允许我们创建各种类型的图表&#xff0c;包括饼图。饼图是一种用于显示数据分布的常见图表类型。在本文中&#xff0c;我们将介绍如何使用Matplotlib创建不同类型的饼图&#xff0c;并提供示例代码。 创建标准饼图 首…

maven配置阿里云镜像源

要配置阿里云镜像源&#xff0c;需要在Maven的配置文件中添加以下内容&#xff1a; 打开Maven安装目录下的conf文件夹&#xff0c;找到settings.xml文件。 在settings.xml文件中&#xff0c;找到标签&#xff0c;如果没有则需要手动添加。 在标签中添加以下内容&#xff1a; …

【python】打包exe文件

使用PyInstaller可以将Python脚本打包成可执行的.exe文件。pyinstaller就是一种常用的打包方式&#xff0c;其中参数&#xff1a; --onefile参数表示将所有依赖项和脚本打包成一个单独的可执行文件&#xff0c;方便分发和执行。--noconsole参数表示在运行程序时不显示控制台窗…

Linux进程【2】进程地址空间(+页表详解哦)

fork 引言&#xff08;程序地址空间&#xff09;进程地址空间进程地址空间mm_struct 虚拟地址到物理地址的转化总结 引言&#xff08;程序地址空间&#xff09; 在之前的学习过程中&#xff0c;我们认识了内存与地址&#xff0c;并且了解了在程序地址空间中的基本分区&#xf…

2000年第五次人口普查数据,shp/excel格式均有,划分年龄段、性别占比等字段

基本信息. 数据名称: 第五次人口普查数据 数据格式: Shp、excel 数据时间: 2000年 数据几何类型: 面 数据坐标系: WGS84坐标系 数据来源&#xff1a;第五次人口普查数据 数据字段&#xff1a; 序号字段名称字段说明1a2000_zrks2000年_常住人口&#xff08;人&…

web块级如何居中,关于css/html居中问题

1. text-align&#xff1a;center&#xff1b; 可以实现其内部元素水平居中&#xff0c;通常用于字体水平居中&#xff0c;初学者也可以用于简单块级居中。这种方法对行内元素 (inline)&#xff0c;行内块 (inline-block)&#xff0c;行内表 (inline-table)&#xff0c;inline…

实现一个MYSQL工具类,包含判断创建数据表是否存在,创建数据表

可以使用Python的MySQLdb模块来实现一个MYSQL工具类。下面是一个简单的实现示例&#xff1a; import MySQLdbclass MySQLTool:def __init__(self, host, user, password, database):self.host hostself.user userself.password passwordself.database databasedef connect…

“/bin/bash“: stat /bin/bash: no such file or directory: unknown

简介&#xff1a;常规情况下&#xff0c;在进入容器时习惯使用 /bin/bash为结尾&#xff0c;如&#xff1a;docker exec -it test-sanic /bin/bash&#xff0c; 但是如果容器本身使用了精简版&#xff0c;只装了sh命令&#xff0c;未安装bash。这时就会抛出"/bin/bash&quo…

Eureka 本机集群实现

距离上次发布博客已经一年多了&#xff0c;主要就是因为考研&#xff0c;没时间学习技术的内容&#xff0c;现在有时间继续完成关于代码方面的心得&#xff0c;希望跟大家分享。 今天在做一个 Eureka 的集群实现&#xff0c;我是在本电脑上跑的&#xff0c;感觉这个挺有意思&a…

Linux的网络文件共享服务之FTP服务

一.存储类型 1.1 存储类型分为三种 直连式存储&#xff1a;Direct-Attached Storage&#xff0c;简称DAS 存储区域网络&#xff1a;Storage Area Network&#xff0c;简称SAN&#xff08;可以使用空间&#xff0c;管理也是你来管理&#xff09; 网络附加存储&#xff1a;Net…

Day 48 动态规划 9

198. 打家劫舍1 代码随想录 1. 思路 本体是非常简单的动态规划问题&#xff0c;dp[i]就代表0-i这些家可以抢劫到的最大金额&#xff0c;分两种情况进行讨论。一个是抢当前的不抢之前的&#xff0c;一个是不抢当前的。代码如下&#xff1a; class Solution { public:int rob(v…

Sqoop作业调度:自动化数据传输任务

自动化数据传输任务是大数据处理中的一个重要方面&#xff0c;可以定期执行Sqoop作业&#xff0c;确保数据在不同系统之间的同步。本文将深入探讨如何使用Sqoop作业调度来自动化数据传输任务&#xff0c;并提供详细的示例代码和全面的内容&#xff0c;以帮助大家更好地理解和应…

基于RBF的时间序列预测,基于BP神经网络的时间序列预测

目录 完整代码和数据下载链接:基于RBF的时间序列预测,基于BP神经网络的时间序列预测(代码完整,数据齐全)资源-CSDN文库 https://download.csdn.net/download/abc991835105/88742382 RBF的详细原理 RBF的定义 RBF理论 易错及常见问题 RBF应用实例,基于RBF的时间序列预测,…

二叉树简介

二叉树 二叉树是每个节点最多有两个子树的树结构&#xff0c;通常子树被称作“左子树”和“右子树”。 二叉树的遍历 二叉树的遍历主要有三种方式&#xff1a;前序遍历、中序遍历和后序遍历。 前序遍历&#xff1a;访问根节点 --> 遍历左子树 --> 遍历右子树中序遍历&…