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

elementui table子级tree懒加载bug

1. 删除子级刷新列表子级依然显示

2.更新状态子级列表未刷新

3.编辑子级后刷新页面显示状态未变更

el-table 树表格load源码

首先,load可以执行,但是只剩一个子节点就有问题,那么就直接可以定位bug在load方法里:

文件路径:element-plus\packages\components\table\src\store\tree.ts

 const loadData = (row: T, key: string, treeNode) => {
    const { load } = instance.props as unknown as TableProps<T>
    if (load && !treeData.value[key].loaded) {
      treeData.value[key].loading = true
      load(row, treeNode, (data) => {
        if (!Array.isArray(data)) {
          throw new TypeError('[ElTable] data must be an array')
        }
        treeData.value[key].loading = false
        treeData.value[key].loaded = true
        treeData.value[key].expanded = true
        // 就是这里,我们的子节点删完了data.length == 0,无法赋值
        if (data.length) {
          lazyTreeNodeMap.value[key] = data
        }
        instance.emit('expand-change', row, true)
      })
    }
  }
 

增加方法手动刷新子级数据

// 刷新时

const refreshChild = (parentId) => {

  if (rowMaps.get(parentId)) {

    const { tree, treeNode, resolve } = rowMaps.get(parentId);

    handleLoadTableChild(tree, treeNode, resolve);

  } else {

    sysTemp.value.getTableData();

  }

};

 

// 先new一个map用于数据保存

const rowMaps = reactive(new Map());

 load加载时存储父级id及数据信息

rowMaps.set(tree.id, { tree, treeNode, resolve });

http://www.lryc.cn/news/500287.html

相关文章:

  • AI与低代码技术融合:如何加速企业智能化应用开发?
  • 【C#】新建窗体文件,Form、UserControl
  • ansible学习笔记之02command模块与shell模块
  • 在Docker中部署禅道,亲测可用
  • C++(十二)
  • 【数学建模】线性规划问题及Matlab求解
  • 【JavaWeb后端学习笔记】Spring全局异常处理器
  • PT8M2102 触控型 8Bit MCU
  • 4. React 性能优化技巧:如何让你的应用更快
  • pytest中使用conftest做测试前置和参数化
  • Spring Boot 中使用 @Transactional 注解配置事务管理
  • MATLAB 建筑顶面面积计算(95)
  • Linux网络编程之---组播和广播
  • Apache Dolphinscheduler可视化 DAG 工作流任务调度系统
  • docker 部署共享文档ZFile
  • 面试题之JVM
  • 二叉树的深搜(不定期更新。。。。。)
  • WebLLM Chat:无服务器、私密的AI聊天体验
  • C#中的模拟服务器与客户端建立连接
  • 【深度学习】利用Java DL4J 构建和训练医疗影像分析模型
  • application.yml 和 bootstrap.yml
  • 使用uniapp开发小程序场景:在百度地图上调用接口返回的设备相关信息并展示
  • ubuntu22.04 使用可以用的镜像源获取你要的镜像
  • Flume——sink连接hdfs的参数配置(属性参数+时间参数)
  • python+docker实现分布式存储的demo
  • go-blueprint create exit status 1
  • 如何更改Git用户名 - 本地与全局设置指南
  • Node.js JWT认证教程
  • 【青牛科技】应用于音频信号处理系统的D258 是由两个独立的高增益运算放大器组成
  • HTML Input 文件上传功能全解析:从基础到优化