el-table树型数据lazy加载实现首行展开

原创 已于 2024-05-27 18:12:51 修改 · 772 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui #前端

于 2024-05-27 18:12:17 首次发布

el-table树型数据lazy加载实现首行展开

遇到一个小需求，一个树型数据的el-table，并且使用lazy加载，需要实现首行展开。

实现

思路：使用 expand-row-keys 或者 toggleRowExpansion API展开，但是发现这些API并不会触发 load 函数。
解：开始自动获取第一行数据的子数据，并设置进第一行数据的 children 里，再使用 toggleRowExpansion API展开第一行。

新问题：点击折叠会再次触发 load 函数
解：展开过一次的行，后面再折叠与展开不会再触发 load，说明触发 load 是有触发机制的，借助了一下混元，找到了这个控制变量 tableRef.value.store.states.treeData.value[].loaded,尝试改了它 loaded: true：

tableRef.value.store.states.lazyTreeNodeMap.value[firstRow.yourRowKey
最低0.47元/天 解锁文章
jchalex
关注
vue2/3 - element表格组件el-table实现懒加载树型(上下级)数据、默认展开和隐藏层级，支持对表格进行修改|新增|删除，解决完成操作后树节点不刷新问题（提供示例代码，一键复制开箱即用
高级前端工程师
03-21 1万+
vue2，vue3，elementui，elementPlus，el-table，Table表格组件，表格懒加载数据，element table表格数中的树形结构懒加载，增加后数据不同步更新问题，el-table树形与el-tree树形结构的一键折叠与展开，elementui中el-tree懒加载数据 默认展开最外层节点，Element-plus Table组件树表结构默认展开一级目录，vue实现element table表格树形结构-使用懒加载时-解决子节点增删改后，不刷新子节点数据问题，解决el-tre
【el-table中tree树形结构自定义下拉框】懒加载自定义节点
weixin_44503925的博客
04-23 781
因数据量巨大（十万条数据），为避免前端页面加载卡死，现将下拉节点置为点击查询后端接口进行拼接子节点数据（懒加载）。地址：https://element.eleme.cn/#/zh-CN/component/tree。生产环境已经出现页面卡死情况。官方示例代码（表示很无奈）
vue的element ui使用el-table组件实现懒加载树、默认自动展开层级（一层，二层）、并且解决新增、删除、修改之后树节点不刷新问题
weixin_41549971的博客
01-10 7975
vue的element ui使用el-table组件实现懒加载树、默认自动展开层级（一层，二层）、并且解决新增、删除、修改之后树节点不刷新问题
el-table懒加载，修改数据局部加载懒加载数据
打工仔~的博客
11-17 6875
看着标题是不是有点绕，这里的需求是使用el-table的懒加载，加载数据后，修改懒加载后的数据时不进行全局的刷新，而是只操作当前懒加载的数据，比如一级是真实的数据，二级是懒加载的数据，当二级的某条数据进行了修改后，只让当前的二级菜单重新向后台请求数据，进行刷新得到最新的数据希望之篇文章对大家有所帮助方法实现Debugel-table的懒加载。
Vue 中利用 el-table 实现懒加载的数据表格
pleaseprintf的博客
06-22 7535
在使用 Vue 开发时，当数据量较大时，为了提高页面加载和渲染的性能，我们可以采用懒加载的方式，即在 el-table（element-ui 的表格组件）上实现懒加载。本文将详细介绍在 Vue 中如何利用 el-table 实现懒加载的方法，帮助您优化页面性能并提升用户体验。通过在 Vue 中利用 el-table 实现懒加载，我们可以优化页面性能，提高用户体验。通过分页获取数据、监听滚动事件、加载下一页数据和动态渲染表格数据，实现了 el-table 的懒加载功能。
第十篇 ElementUI 树形表格懒加载-新增修改删除等操作进行局部刷新数据
Yzt_199626的博客
05-22 6689
该篇的模拟的功能：ElementUI 树形表格懒加载数据展示，并对某列数据进行相应操作(新增，修改和删除)，并对列表进行局部的数据刷新。 模拟效果图如下： 1. 注意到到点的就是，后端返回的数据结构类型中，每一层级都得包含父级的标识，如下的 parentId 的父级的 id为 0，自己的 id 为1： { id: 1, parentId: 0, date: '2016-05-02', name: '王
ElementUI中table组件懒加载效果，并默认展开第一层的数据
a476613958的博客
04-27 2432
【代码】ElementUI中table组件懒加载效果，并默认展开第一层的数据。
elementUi使用el-table表格组件 实现树形数据默认自动展开第一层级（或指定的某一层，或多层）的使用
m0_53682699的博客
08-29 3454
vue项目使用el-table表格组件，需要实现列表页的树形数据默认自动展开第一层级功能
el-table树形懒加载展开改为点击行展开
梦雨的博客
01-02 527
el-table树形懒加载展开改为点击行展开
记一次被 el-table 树形懒加载坑惨了的填坑实录（Vue3 + Element Plus）
Caleb的博客
02-28 1470
当我把这个方案提交后，产品经理看着丝般顺滑的更新效果，终于放下了他 40 米长的需求大刀。而我在深夜的办公室，默默删掉了准备提交的离职申请…这个内部状态对象掌控着懒加载节点的生杀大权，而 Element Plus 并没有给我们暴露一个合适的 API 来精细化管理它。“咱们那个任务管理系统啊，父任务下要支持无限层级子任务，用户说操作完经常要手动刷新才能看到变化…我表面笑嘻嘻点开 Element Plus 文档，内心 OS：不就是个树形表格懒加载吗？这时候，我意识到得自己动手封装一个合理的缓存管理方案。
前端-el-table嵌套el-table展开，默认展开第一行
qq_42371932的博客
11-28 1322
出
el-table tree 默认展开一级
monkey7
12-27 4488
获取树之后遍历 将ID push到数组中 此处Array里面存放key的字符串 而不是number。我之前的element-ui版本为2.0.4 而表格树默认展开功能是要版本2.9.0以上才支持的。这几个属性 虽然有表格树的效果 但是默认展开这件事是没反应的 研究了好久才发现是版本问题 感到气气。在table中要设置 row-key expand-row-keys绑定一个key的数组。要求是一个表格展示树形数据，默认展开一级。
el-table懒加载树形数据，实现整行点击的展开
sanlingwu的博客
08-16 3177
做项目遇到一个需求，根据集团层级展现一组数据，每个层级都可以点开看更详细的拆分数据，第一想法是用el-table的树形数据来展示，大概下面这个样子： 用过这个组件的应该知道这个只能通过点击每一行前面的小箭头实现伸缩，箭头有点小，而且表格一行的数据很长时，对用户的操作不是很友好，所以想能够点击一行的任意位置都可以进行伸缩。 1、官网中的toggleRowExpansion方法如下： <el-table :data="tableData" ref="refTable"
el-table 树形数据 懒加载模式下一键展开
jam476的专栏
03-21 2285
el-table 树形数据 懒加载模式下一键展开收起
关于el-table树形数据与懒加载
weixin_48911357的博客
02-04 671
el-table树形数据与懒加载实现
Element-ui的el-table表格嵌套如何默认展开行，试试这个吧！（芋道源码yudao-cloud 二开笔记）
qq_31676725的博客
08-08 902
在el-table组件中有默认展开的属性expand-row-keys需要配合row-key使用，可能是我用的方式不对，用了不生效。所以我索性换一种解决方案。通过 Vue 的 ref 方法手动展开第一行。
vue el-table 树形数据懒加载每次点击子集父级只展示一行
G佳伟
03-03 1014
每次只打开一个同级数据节点展开，之前展开的自动收起。ps：找了好久都没有找到完全符合需求的组件。
Vue2&Element-UI中Table树形结构默认全部展开和关闭的实现方案
月色真美121的博客
07-23 7243
element ui 中table表格全部展开和收起的两种实现方式
一键展开或折叠树形表格
Joyce的博客
04-16 3342
的属性表格每次点击只能展开或折叠当前行，当数据量多或者表格层级比较多的情况下，我们就需要引入一键展开或者折叠所有行的这么一个功能。属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。在表格中单列一列（最左列），通过自定义表头的方式，显示展开折叠图表。现有一个树形表格，需要在表头配置一个折叠展开按钮，点击可以将所有的行折叠或者展开。中，如果树型表格的深度较深，可以采用递归的方法去遍历表格，添加。方法，展开全部的话，遍历当前表格的所有行，将。
在 el-select 组件中使用 el-tree 树型数据
最新发布
09-03
### 使用方法 #### 1. 引入组件 在 Vue 项目中，需要引入 `el-select` 和 `el-tree` 组件。可以使用全局引入或局部引入的方式。 #### 2. 编写模板代码 在 `template` 部分，将 `el-tree` 嵌套在 `el-select` 组件的 `el-option` 中。示例代码如下： ```vue <template> <div> <el-select ref="selectTree" v-model="treeData" placeholder="请选择..." > <el-option :value="categoryId" style="height: auto"> <el-tree ref="tree" :data="categoryOptions" default-expand-all node-key="categoryId" empty-text="无匹配数据" :props="defaultProps" highlight-current @node-click="handleNodeClick" /> </el-option> </el-select> </div> </template> ``` #### 3. 编写数据部分 在 `data` 中定义所需的数据，如树型数据、默认配置等。示例代码如下： ```javascript data() { return { categoryId: null, categoryOptions: [], treeData: "", data: [ { id: 1, name: "一级 1", children: [ { id: 4, name: "一级 1-1", }, ], }, ], defaultProps: { value: 'categoryId', label: 'categoryName', children: "children", disabled: function(data, node) { if (data.isLeaf === 1) { return false; } else { return true; } }, }, }; } ``` #### 4. 编写事件处理函数 在 `methods` 中编写 `node-click` 事件的处理函数，用于处理节点点击事件。示例代码如下： ```javascript methods: { handleNodeClick(data, node, component) { // 处理节点点击逻辑 this.treeData = data.categoryId; }, } ``` ### 注意事项 - **数据格式**：`el-tree` 的 `data` 属性需要传入正确的树型数据结构，每个节点需要有唯一的 `node-key` 标识。 - **事件绑定**：确保 `node-click` 事件正确绑定到 `el-tree` 组件上，并且在事件处理函数中正确处理选中逻辑。 - **样式问题**：检查是否存在样式冲突或覆盖，导致点击区域异常。可以通过浏览器开发者工具检查元素样式，确保点击区域正常。 - **选中逻辑**：需要手动设置 `el-select` 的选中值，确保选中状态正确显示。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值