el-table使用lazy模式 数据更新节点中的数据不更新问题

最新推荐文章于 2024-05-27 18:12:17 发布
最新推荐文章于 2024-05-27 18:12:17 发布
阅读量3k 收藏
点赞数 1
分类专栏： js 文章标签： vue vue.js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39763157/article/details/107468856
版权

el-table使用lazy模式 数据更新节点中的数据不更新问题

在使用el-table组件的lazy懒加载时,load方法可以实现子节点的懒加载。但是当table的数据重新渲染而key值并没有改变时,会发现展开状态下的子节点数据无法更新，

为了解决这问题，通过看源代码发现，可以改变这两个值在数据重新渲染的时候更新子节点的状态信息

      this.$refs.table.store.states.treeData[`${item}Team`].loaded = false；
      
      this.$refs.table.store.states.treeData[`${item}Team`].expanded = false；
小橙子已存在
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
树形表格(el-table)懒加载(lazy)添加编辑删除的局部更新
weixin_67490903的博客
10-20 3382
如上图所示，当我们对最后一个节点（一部/三部）进行编辑，删除或者添加门店团队时，希望操作完成后，数据更新只是（一区）下面的数据或者对应操作按钮的节点进行局部更新，树形展开情况保持住。//接下来是map的set存储,key值是点击节点的id,value是load接收的参{tree,treeNode,resolve}第二，当数据进行懒加载时把点击的节点数据存储在map中。//在删除成功后需要获取数据时在使用。//getData()是懒加载获取数据的方法。//在添加，修改成功后需要获取数据时在使用。
Vue 中利用 el-table 实现懒加载的数据表格
pleaseprintf的博客
06-22 6602
在使用 Vue 开发时，当数据量较大时，为了提高页面加载和渲染的性能，我们可以采用懒加载的方式，即在 el-table（element-ui 的表格组件）上实现懒加载。本文将详细介绍在 Vue 中如何利用 el-table 实现懒加载的方法，帮助您优化页面性能并提升用户体验。通过在 Vue 中利用 el-table 实现懒加载，我们可以优化页面性能，提高用户体验。通过分页获取数据、监听滚动事件、加载下一页数据和动态渲染表格数据，实现了 el-table 的懒加载功能。
el-table懒加载对子节点增删查改表格数据不刷新问题
weixin_44969308的博客
09-24 311
为每个节点增加一个临时ID作为row-key <el-table :data="companyList" v-loading="listLoading" border row-key="tempId" lazy :load="load"> this.companyList[index].tempId = Math.random() * 1000000 + 'companyTempId' data[index].tempId = Math.random() * 1000000 + 'depar
el-table树型数据lazy加载实现首行展开
最新发布
无节操
05-27 298
遇到一个小需求，一个树型数据的el-table，并且使用lazy加载，需要实现首行展开。解：开始自动获取第一行数据的子数据，并设置进第一行数据的。是有触发机制的，借助了一下混元，找到了这个控制变量。解：展开过一次的行，后面再折叠与展开不会再触发。然后，工作了，默认首行展开，折叠/展开切换正常。API展开，但是发现这些API并不会触发。新问题：点击折叠会再次触发。
el-table懒加载，修改数据局部加载懒加载数据
打工仔~的博客
11-17 6282
看着标题是不是有点绕，这里的需求是使用el-table的懒加载，加载数据后，修改懒加载后的数据时不进行全局的刷新，而是只操作当前懒加载的数据，比如一级是真实的数据，二级是懒加载的数据，当二级的某条数据进行了修改后，只让当前的二级菜单重新向后台请求数据，进行刷新得到最新的数据希望之篇文章对大家有所帮助方法实现Debugel-table的懒加载。
el-table里面的el-image的lazy属性问题
schumyxp的专栏
06-02 1756
如果你不确定你的scroll-container的值应该写什么，就可以把里面的内容拿出来，用document.querySelector试一下，比如我的，就要试一下document.querySelector('#listTable .el-table__body-wrapper')，如果看到找到的div就是我们要的那个，就说明你找对了。但是这个时候，如果里面用到了el-image，会发现如果设置了lazy，也就是懒加载，图片是不会显示的。查了很多现成的文档，也问了ChatGPT，都没有好的答复。
element-ui的树形表格el-table懒加载lazy子节点修改数据后局部刷新
小码农前端导航http://xmn-xdm.com/ 
03-08 4586
在使用element-ui的树形表格(el-table)懒加载(lazy)，并使用了懒加载，出现了一个问题，在对当前节点添加、修改、删除一个子节点数据时，当前节点的子节点数据并不自动刷新出来。element-ui官方没有提供子节点修改数据后局部刷新方法。
ElementUI el-table树形表格懒加载手动刷新 解决Element Table组件树形展示懒加载数据更新的问题
高宇辰
12-19 4599
最近在使用Element的el-table表格组件时，发现一个问题，我的业务场景需要使用树形表格，并且使用懒加载的模式加载子级数据，但是使用Element自带的树形表格和懒加载功能，懒加载仅会在第一次展开时加载，后续会使用第一次缓存的数据，而不会重新加载，本篇文章提供了解决方案。首先，先看一下Element的el-table组件的相关代码：
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
同时，确保在`el-table`中使用`v-if`指令来决定列是否渲染。 至于**列排序**，在`el-table`中，可以使用`sortable`属性来指定列是否可排序，而`sort-method`则用于自定义排序逻辑。默认情况下，`el-table`支持对...
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue elementUI table表格数据 滚动懒加载的实现方法
10-17
Vue 的核心特点是数据驱动视图，通过 `data` 定义状态，然后在模板中使用 `v-bind` 或简写 `:` 将数据绑定到元素上。ElementUI 的 `el-table` 组件可以方便地展示表格数据，并支持数据绑定。 2. **ElementUI Table...
vue el-cascader所需要的省市区街道联动的数据格式
07-26
今天找到了大半天，没找到合适的 vue el-cascader 省市区街道4级联动的数据，并且支持维护修改的。 于是自己做了一个。 代码非常简单，重要的符合这个格式的数据，这就是我这个懂后端程序员的优势了。
vue-lazyload使用总结(推荐)
10-17
在实际使用过程中，可能会遇到一些问题，如图片加载失败、占位符不显示等。这些问题可能源于配置错误、图片路径问题或者与其他库的冲突。解决这些问题通常需要检查以下几点： 1. 确保图片路径正确，且在Vue的data...
Element-ui el-image图片时而加载失败时而加载成功
HackerAC的博客
10-20 3368
Element-ui el-image图片时而加载失败时而加载成功的解决建议
ElementUI el-table树形表格懒加载如何手动刷新 el-table树状表格手动刷新的方法
热门推荐
无枫的博客，分享Java及Vue方向的技术文章
10-09 1万+
最近在使用elementplus的el-table表格组件时，发现一个问题，我的业务场景需要使用树形表格，并且使用懒加载的模式加载子级数据，但是使用elementplus自带的树形表格和懒加载功能，懒加载仅会在第一次展开时加载，后续会使用第一次缓存的数据，而不会重新加载，本篇文章提供了解决方案。 我的环境是elementplus，按照相同原理，应该是可以在elementui中使用的，下面开始正文。 首先，先看一下table组件的相关代码： <el-table :data="xxxList"
el-table使用lazy-tree模式,数据重载节点中的tree数据不会更新的问题
weixin_38954787的博客
04-09 4818
在使用el-table组件提供的lazy模式中,load方法可以实现tree子节点的懒加载。但是当table的数据重新渲染而key值并没有改变时,会发现expand状态下的tree子节点数据无法更新 在el-table的源码中的tree.js load(row, treeNode, data => { if (!Array.isArray(data)) { ...
element的Table表格组件树形数据与懒加载简单使用
weixin_41549971的博客
01-10 2112
element的Table表格组件树形数据与懒加载简单使用
el-tabs的:lazy=“true“延时加载问题
Silence-Lee的博客
03-15 8334
文章目录1 问题产生原因2 使用tab-pane自带的`:lazy="true"`延时加载3 使用`v-if="activeName == item.valueCode"`解决2中的问题4 柳暗花明又一村 1 问题产生原因 项目中遇到一个需求，在一个tabs下面有三个tab-pane，且每个tab-pane列表及查询条件一样，因此后端写了一个接口有三个不同的type；前端写了一个childList组件，在tab-pane中循环调用三次，但初始化页面时，会直接调用三次接口（分别传不同type）,这样虽然能实现
优化el-table表格输入框卡顿，v-model加lazy修饰符（输入数据不保存，会自动复原）
m0_56065511的博客
08-12 1468
优化el-table表格输入框卡顿，v-model加lazy修饰符（输入数据不保存，会自动复原）
el-table 使用懒加载 加载远程children数据
06-05
你可以使用 `expand-row` 事件来实现 el-table 的懒加载，具体步骤如下： 1. 在 el-table 中设置 `:tree-props="{lazy:true, load:loadChildren}"`，其中 `lazy:true` 表示启用懒加载，`load:loadChildren` 表示加载远程子节点数据的方法为 `loadChildren`。 2. 在 `methods` 中定义 `loadChildren` 方法，该方法接收三个参数：`node` 表示当前节点，`resolve` 表示加载完成后的回调函数，`reject` 表示加载失败后的回调函数。 3. 在 `loadChildren` 方法中通过远程请求获取当前节点的子节点数据，然后将数据传给 `resolve` 函数。 4. 在 `expand-row` 事件中调用 `loadChildren` 方法，将当前节点和回调函数作为参数传递进去。 下面是一个示例代码： ```html <template> <el-table :data="tableData" :tree-props="{lazy:true, load:loadChildren}" @expand-row="expandRow" > <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [] } }, methods: { loadChildren(node, resolve, reject) { // 发送远程请求获取当前节点的子节点数据 axios.get(`/api/children?id=${node.id}`).then(response => { resolve(response.data) }).catch(error => { reject(error) }) }, expandRow(row, expandedRows) { // 调用 loadChildren 方法加载子节点数据 this.loadChildren(row, children => { row.children = children expandedRows.push(row) }) } } } </script> ``` 在上面的示例中，我们通过 `axios` 发送了一个远程请求来获取子节点数据，并通过 `resolve` 函数将数据传递给 el-table 组件。在 `expand-row` 事件中，我们调用了 `loadChildren` 方法来加载子节点数据，并将回调函数 `children => {row.children = children; expandedRows.push(row)}` 作为参数传递进去。在回调函数中，我们将子节点数据赋值给当前节点的 `children` 属性，并将当前节点加入到 `expandedRows` 数组中，以便展开当前节点时可以正常显示子节点。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值