开发时遇到的问题

因为表格的数据是多级的且数据量比较庞大，所以我使用了element plus的树形数据表格与懒加载，用了之后，自己也没有自测然后就没管了，后来被测试提了一个bug（增删改操作后数据没有实时更新数据，需要手动刷新页面然后再一级一级的展开才能看到自己刚才增加或者修改的数据）。收到bug我立刻就进行bug重新操作后发现，当你新增或者修改顶级以下的数据后，你重新请求数据也只是顶级数据（因为用了数据懒加载需要一级一级的展开并加载数据），好的，既然发现了问题，我们就开始寻找解决问题的方法。

最开始肯定是翻看element plus的文档看看有没有直接操作懒加载数据的方法啊啥的，好家伙，table组件的13个方法中没有一个有用。怎么办？问百度！然后发现网上描述并给出解决方案的人基本没有，但是还是给了我解决问题的决定性因素。table组件的实例中一个属性好像可以解决这个问题，那就是金光闪闪的

tableRef.value.store.states.lazyTreeNodeMap.value

其中tableRef.value是表格的实例，然后让咱们来打印下数据：

看了这个图，我们可以知道懒加载的数据全部放在这里，而且幸运的是这对象还是一个响应式数据，所以我们想要实时更新就直接修改这里的数据就欧克了！然后进入正题：

技术栈

"vue": "3.2.37"
"element-plus": "2.1.8"

增

我们要实现增加数据后实时添加表格数据，而且还需要注意比如当你给当前没有子级的二级数据增加子级数据时，实时更新数据后还需要调用方法展开这个二级数据。直接上代码：

addArea(form.value).then((res) => {
  proxy.$modal.msgSuccess('新增成功')
  open.value = false
  //当添加的是子级数据时
  if (form.value.parentId) {
    const lazyTreeNodeData = tableRef.value.store.states.lazyTreeNodeMap.value
    if (lazyTreeNodeData[form.value.parentId]) {
      lazyTreeNodeData[form.value.parentId].unshift(res.data)
    } else {
      lazyTreeNodeData[form.value.parentId] = [res.data]
    }
  } else {
    //添加顶级区域
    areaList.value.unshift(res.data)
  }
  if (curRow.value) {
    //等页面渲染完成后调用展开方法
    nextTick(() => {
      tableRef.value.toggleRowExpansion(curRow.value, true)
    })
  }
})

其中form.value是增加操作的表单数据。areaList.value是你传给table组件的data属性的数据。toggleRowExpansion方法是表格实例的方法，用来展开下级数据的。
有一点很重要就是你需要和后端商量添加接口返回给你添加的数据和后端生成的添加的数据的id，否则你后面你不刷新页面对添加的数据做操作时会出现问题！

改

改和删除都比较简单了，我就直接贴代码吧。

editArea(form.value).then((res) => {
  open.value = false
  proxy.$modal.msgSuccess('修改成功')
  if (form.value.parentId) {
    //修改子级数据
    const lazyTreeNodeData = tableRef.value.store.states.lazyTreeNodeMap.value
    const index = lazyTreeNodeData[form.value.parentId].findIndex((item) => item.areaId === form.value.areaId)
    lazyTreeNodeData[form.value.parentId][index] = form.value
  } else {
    const index = areaList.value.findIndex((item) => item.areaId === form.value.areaId)
    //修改顶级区域
    areaList.value[index] = form.value
    console.log('被修改的数据', form.value)
  }
  // getList()
})

删

//懒加载表格实时删除操作
  if (row.parentId) {
    const lazyTreeNodeData = tableRef.value.store.states.lazyTreeNodeMap.value
    const index = lazyTreeNodeData[row.parentId].findIndex((item) => item.areaId === row.areaId)
    lazyTreeNodeData[row.parentId].splice(index, 1)
  } else {
    const index = areaList.value.findIndex((item) => item.areaId === row.areaId)
    //删除顶级区域
    areaList.value.splice(index, 1)
  }
  proxy.$modal.msgSuccess('删除成功')

如果我的文章对有用，点个赞吧！

element plus关于树形表格组件的增删改操作实现数据实时更新

开发时遇到的问题

技术栈

增

改

删