当前位置: 首页> 汽车> 新车 > 厦门专业网站_免费申请域名和空间_长春网站制作公司_老师直播课

厦门专业网站_免费申请域名和空间_长春网站制作公司_老师直播课

时间:2025/7/11 19:38:25来源:https://blog.csdn.net/zhu_lizhen/article/details/146209386 浏览次数: 1次
厦门专业网站_免费申请域名和空间_长春网站制作公司_老师直播课

树形数据加载很常用的功能,而且使用场景非常多,但子节点刷新确是个麻烦事

在这里插入图片描述

#树形数据分两种,后端接口天然支持树形。这种非常简单。

<template><div><el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all:tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-column prop="date" label="日期" sortable width="180"></el-table-column><el-table-column prop="name" label="姓名" sortable width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></template><script>export default {data() {return {tableData: [{id: 1,date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: 2,date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {id: 3,date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',children: [{id: 31,date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {id: 32,date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}]}, {id: 4,date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}],},}
}
</script>

正常数据量不大,直接接口就能把树形数据放回,万事大吉,刷新接口,即可完成子节点的刷新

前端页面需要懒加载,接口不支持

有些时候,接口是不可能把所有子节点的数据返回的,那么只能点击一个父级加载一个,而且懒加载,比较省资源。那么就必须要解决刷新的问题。

<template><div><el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load" ref="table":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template>
<script>
export default {data() {return {tableData1: [{id: 1,date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: 2,date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {id: 3,date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',hasChildren: true}, {id: 4,date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}],maps: new Map()}},methods: {load(tree, treeNode, resolve) {getProjectWork({page: this.pageParam.page,size: this.pageParam.size,fid: tree.id,}).then((res) => {if (res.code == 0) {if (!res.data.list.length) {/*element-ui中table懒加载数据时,如果data是空数组,则不会刷新lazyTreeNodeMap中记录了懒加载节点的子列表数据通过tree.id作为key,将数据存入lazyTreeNodeMap中,因此手动清除缓存数据即可*/// 注意:要在el-table组件上绑定ref='table'this.$set(this.$refs.table.store.states.lazyTreeNodeMap, tree.id, [])} else {resolve(res.data.list);}this.map.set(tree.id, { tree, treeNode, resolve });}});},// 触发刷新节点方法refresh(parentId) {// 根据父级id取出对应节点数据if (this.maps.get(parentId)) {const { tree, treeNode, resolve } = this.maps.get(parentId)if (tree) {this.load(tree, treeNode, resolve)}}},},
}
</script>

正常配置

  1. 设置 Table 的 lazy 属性为 true
  2. 加载函数 load
  3. 指定 row 中的 hasChildren字段来指定哪些行是包含子节点

以上懒加载必备属性。

解决懒加载刷新

  1. 定义maps字段
this.map.set(tree.id, { tree, treeNode, resolve });
  1. 每次点击打开父节点时,把参数存储下来。

直接在加载子节点属性的方法内补充

 this.map.set(tree.id, { tree, treeNode, resolve });
  1. 重点,当数据为空时,需要手动处理
this.$set(this.$refs.table.store.states.lazyTreeNodeMap, tree.id, [])
  1. 补充一个刷新的方法

此方法就是直接在请求一次加载子节点

 refresh(parentId) {}

后面的工作就简单了

  1. 删除数据了,直接访问一下 refresh 方法
  2. 数据修改了,直接访问一下 refresh 方法
  3. 批量数据删除了,那就一个个去请求 refresh 方法

注意点:

maps 存储的是以父节点id为key的对象,触发的时候也是用父节点去触发。

关键字:厦门专业网站_免费申请域名和空间_长春网站制作公司_老师直播课

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: