Element Plus + Vue3 踩坑

您所在的位置：网站首页 › 藏族民族的舞蹈叫什么 › Element Plus + Vue3 踩坑

Element Plus + Vue3 踩坑

2024-05-28 06:36| 来源: 网络整理| 查看: 265

项目场景：

在这里插入图片描述

问题描述

问题一、设置 Table 的 lazy 属性为 true 与加载函数 load，可实现懒加载树形数据。但在展开子集后新增、编辑、删除，却不实时更新数据。

问题二、解决以上问题后，发现当子集只剩一条数据时，删除这条数据依旧不触发数据刷新。

在这里插入图片描述

原因分析：

懒加载 load 定义的函数只有在第一次打开子节点的时候才会触发，其他时候不会触发，所以导致了数据不实时刷新。

解决方案：

在这里插入图片描述当处理数据后，重新手动调用 load 函数，已到达子集数据刷新的目的。设置 const maps = new Map()在 load 函数中将 row, treeNode, resolve 存储下来。

const maps = new Map() const tableRef = ref(null); const load = ( row, treeNode, resolve ) => { maps.set(row.id, {row, treeNode, resolve}) setTimeout(() => { api({ parentId: row.id, ...props.params }).then(res => { const data = res.data.data; resolve([...data]) }) }, 1000) }

当新增、编辑、删除后调用 refresh 方法，并传入被处理数据的 parentId，maps.get(parentId)将对应的参数取出，传参给 load 函数。

const refresh = (parentId) => { getTableData(page, formInline); const map = maps.get(parentId); if(map) { load(map.row, map.treeNode,map.resolve) } }

当子集删除最后一条数据时，需要单独进行处理。判断返回的数据是否为空，为空时手动置空。

if(data.length > 0) { resolve([...data]) } else { tableRef.value.store.states.lazyTreeNodeMap.value[row.id] = [] }

在这里插入图片描述（以上，第二个问题导致的原因待我细细研究。）

【本文地址】

Element Plus + Vue3 踩坑

Element Plus + Vue3 踩坑

今日新闻

推荐新闻