如上图的el-table,懒加载删除最后一条时,不刷新页面,百度后答案是在this.$refs.tableRef中的store(在el-table中添加ref="tableRef") state对象中states里的lazyTreeNodeMap是子节点的对象数组 lazyTreeNodeMap中的11和18即为俩父节点id,删除18下31,需要清空18下的子节点时,可以 resolve([])后 this.$set(th...
lazy /* 开启懒加载 */ :load="load" /* 懒加载调用的方法 */ :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" /* 渲染嵌套数据的配置选项 不可缺少 */ style="width: 100%" ref="cTable" /* ref 刷新页面时用到,不可缺少 */ ><el-table-columnprop="id"label="ID"/...
解决办法: //删除一级数据后,将整个懒加载的lazyTreeNodeMap手动清空this.$set(this.$refs.tableFee.store.states.lazyTreeNodeMap,deleteRowId,[]);//deleteRowId:删除的一级数据的id,可在数据初始化时自定义该id
<template> <div class="app"> <!-- 思路: 表格设置固定高度 默认加载10条数据 对表格容器进行滚动事件的监听,监听是否到达底部,如果到达底部则往表格追加数据 --> <h1>表格-懒加载</h1> <el-table :data="table_data" border style="width: 100%" height="400" ref="tableRef" > <el-table-column...
第一步:创建基础的 el-table 第二步:添加展开事件处理器 为了实现懒加载,我们需要监听用户对节点的展开操作。这可以通过在 el-table 组件上使用 tree-props 属性来实现,该属性允许我们指定节点的展开事件处理器: <el-table :data="tableData" style="width: 100%" :tree-props="{ children: 'children', has...
在el-table 中实现懒加载,通常需要使用 load 方法。load 方法会在需要加载子节点时被调用,你需要在这个方法中通过 AJAX 请求或其他方式获取子节点的数据,并返回给 el-table。 3. 编写代码实现 el-table 树形表格的懒加载 下面是一个简单的示例代码,展示了如何在 el-table 中实现树形表格的懒加载功能: html &...
el-table滚动懒加载指令逻辑文件 exportdefault{bind(el,binding){lettable_dom=el.querySelector(".el-table__body-wrapper");table_dom.addEventListener("scroll",function(){letcondition=this.scrollHeight-this.scrollTop<=this.clientHeight;if(condition){binding.value();}});}} ...
</el-table> 懒加载合并单元格 methods: {spanColumn({ row, column, rowIndex, columnIndex }) {if(row._spanColumn) {return[0,0]; } },load(tree, treeNode, resolve) {setTimeout(() =>{resolve([ {_spanColumn:true,id:newDate().getTime() +Math.random().toString(36).substr(2), ...
懒加载和不懒加载没有关系吧? 所有的列都是基于 el-table-column, el-table-column 是本身就已经配置好了。编辑的话把 row 传过去即可。 <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button siz...
删除和修改的函数中传入fu父级id查找到保存在map对象中的节点信息触发一次load()从而达到更新子节点信息的效果 const { parentId } = row const { tree, treeNode, resolve } = this.maps.get(parentId) this.$set(this.$refs.table.store.states.lazyTreeNodeMap, parentId, []) ...