首页 > 其他分享 >vue-easy-tree解决大量数据卡死问题 虚拟滚动

vue-easy-tree解决大量数据卡死问题 虚拟滚动

时间:2025-01-14 15:54:07浏览次数:1  
标签:node vue tree treeRef selectedIds easy children

            // 定义一个函数来遍历树形数据并设置节点的checked、半选和disabled状态
setNodeStates(nodes, selectedIds) {
    const treeRef = this.$refs["from-tree"]; // 获取 vue-easy-tree 的引用
  if (treeRef) {
    nodes.forEach(node => {
      const isSelected = selectedIds.includes(node.id);
      // 设置节点勾选状态
        treeRef.setCheckedKeys(selectedIds)
        //处理半选
        
      node.disabled = isSelected;
      if (node.children && node.children.length > 0) {
        this.setNodeStates(node.children, selectedIds);
      }
    });
  } else {
    console.error("Tree reference not found!");
   }
  }, 

  

<vue-easy-tree :ref="treeId" v-loading="loading" :show-checkbox="show" :expand-on-click-node="false"
              :props="treeProps" :data="treeData_self" highlight-current :node-key="treeNodeKey" height="300px"
              :check-strictly="strictly" :filter-node-method="filterNode" @onNodeDbClick="onNodeDbClick">
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <div class="label-content">
                  <span :title="showTreeLabelName(data)">{{ showTreeLabelName(data) }}</span>
                </div>
              </span>
            </vue-easy-tree>

  虚拟滚动 主要是设置node-key 和 height属性

标签:node,vue,tree,treeRef,selectedIds,easy,children
From: https://www.cnblogs.com/yanni-w/p/18670962

相关文章

  • 【VUE】父子组件联动实现动态样式控制
    相关组件:父组件:src/views/erp/contract/Form.vue子组件:src/views/erp/contract/modules/PlanTable.vue实现思路:1.根据已有的isEdit判断状态是不是编辑或者新增,将状态传递给子组件2.子组件根据状态来决定是否添加星号样式具体方法:1.将原来的固定样式,改为动态样式{title......
  • 基于SpringBoot+Vue的大型超市数据处理系统的设计与实现(源码+lw+部署+讲解)
    文章目录1.前言2.详细视频演示3.具体实现截图4.技术可行性分析5.技术简介5.1后端框架SpringBoot5.2前端框架Vue5.3系统开发平台6.系统架构设计7.程序操作流程8.业务流程设计9.为什么选择我们9.1自己的公众号9.2海量实战案例10.代码参考11.数据库参考12.源码及文档获取......
  • 打卡信奥刷题(599)用C++信奥P7852[普及组/提高] 「EZEC-9」Yet Another Easy Problem
    「EZEC-9」YetAnotherEasyProblem题目描述给定n,mn,mn,m,你需要输出一个长度为......
  • vue项目利用vite打包发版,前端页面自动提示用户刷新页面
    概要        我们做一个纯前端自动提示用户刷新页面的功能,这个功能主要是防止用户的js代码还是旧版的导致某些功能没能及时更新。整体架构流程1、我们先在public/version.json创建这个json文件,用来存储版本号{"version":"1.0"}2、我们可以在vite.config.j......
  • 《Vue.js设计与实现》学习笔记_第二章 框架吗设计的核心要素
    目录1.提升用户的开发体验2.控制框架代码的体积3.框架要做到良好的Tree-Shaking4.框架应该输出怎样的构建产物5.特性开关6.错误处理7.良好的TypeScript类型支持1.提升用户的开发体验提供友好的警告信息有助于开发者快速定位问题。提供必要的警告信息:warn函数......
  • Vue.js组件开发-实现图片裁剪
    在Vue.js中开发一个图片裁剪组件,可以使用cropperjs库,它是一个功能强大的JavaScript库,专门用于图片裁剪。在Vue项目中,可以通过vue-cropperjs这个Vue包装器来更方便地使用cropperjs。步骤:1.安装依赖首先,需要安装cropperjs和vue-cropperjs:npminstallcropperjsvue-cropperj......
  • 基于Spring Boot+Vue的大学生创业项目的信息管理系统
    一、系统概述该系统旨在为大学生创业项目提供一个高效、便捷的信息管理平台,帮助创业者更好地管理项目信息、团队成员、进度安排等关键数据。通过SpringBoot和Vue的结合,系统实现了前后端分离,提高了开发效率和系统的可维护性。二、技术架构前端技术:系统前端采用Vue.js框架......
  • springboot+vue的河南天气数据分析与可视化系统python-计算机毕业设计
    目录功能和技术介绍具体实现截图开发核心技术:开发环境开发步骤编译运行核心代码部分展示系统设计详细视频演示可行性论证软件测试源码获取功能和技术介绍该系统基于浏览器的方式进行访问,采用springboot集成快速开发框架,前端使用vue方式,基于es5的语法,开发工具Intelli......
  • springboot+vue的二手交易平台评论情感分析系统python-计算机毕业设计
    目录功能和技术介绍具体实现截图开发核心技术:开发环境开发步骤编译运行核心代码部分展示系统设计详细视频演示可行性论证软件测试源码获取功能和技术介绍该系统基于浏览器的方式进行访问,采用springboot集成快速开发框架,前端使用vue方式,基于es5的语法,开发工具Intelli......
  • springboot+vue的网购平台用户购买力差异分析及研究python-计算机毕业设计
    目录功能和技术介绍具体实现截图![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/43904518e65045b98fdab97fa21adb87.png)开发核心技术:开发环境开发步骤编译运行核心代码部分展示系统设计详细视频演示可行性论证软件测试源码获取功能和技术介绍该系统基于......