vue项目中实现element表格懒加载删除、修改、新增动态渲染

这几天开发遇到了表格懒加载删除修改之后数据不刷新的问题，解决了之后笔记记一下。方便后面遇到相似的问题能回来找一下思路，也希望能帮助到更多的朋友们~

• 大致思路

表格懒加载的实现可以看element官网，这里只说一下懒加载的动态渲染问题。
实现了表格懒加载后，节点在第一次懒加载时会请求接口获取数据，然后将本次加载出来的数据进行存储，等你下次进行节点访问时，直接从中拿数据就可以了，不会做接口请求。
所以，我们要针对懒加载表格的数据存储做操作，大致的实现思路：每当我们进行新增、修改、删除操作后，我们就将当前节点父节点下的存储数据清空，手动再次请求接口数据，然后进行数据渲染就可以了。

• 删除的动态渲染

首先我们要声明一个treeObj对象来存储我们加载过的节点，然后我们进行删除操作时，从中拿到操作节点的父节点对象（this.$refs.pager.store.states.lazyTreeNodeMap，不同框架的表格会有不同的取法，主要就是找到lazyTreeNodeMap），将父节点的子节点全部清空，然后手动进行懒加载请求得到数据重新渲染。

export default {
  data() {
    return {
      treeObj: {}  // 声明一个对象，来存储懒加载后的每一个节点对象。
    }
  },
  methods: {
    async loadTable(tree, treeNode, resolve) {  // 表格懒加载方法
      this.treeObj[tree.id] = { tree, treeNode, resolve }  // 将本次节点对象存储到maps对象中
      const data = {
        page: { pageSize: 10, pageNum: 1 },
        params: { mid: '123456', id: tree.id }
      }
      // 请求接口，获取数据
      const loadChildren = await this.$api.request('pager/data', { data }) 
      // 数据映射，得到自己想要的数据格式
      if (Array.isArray(loadChildren) && loadChildren.length > 0) { 
        loadChildren.forEach((item) => {
          item.rowid = tree.rowid + '.' + item.rowid
        })
        resolve(loadChildren)  // 返回最终数据对象
      } else {
        tree.children = []
        resolve([])
      }
    },
    deleteRow(row) {  // 表格删除方法
     this.$confirm('是否确认删除该标签分类？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
     })
      .then(async () => {
        const params = {
          data: {
            id: row.id
          }
        }
        try {
          await this.$api.request('pager/delete', params)
          this.searchTableData()  //表格刷新
          if (row.fjd === '001') return  // 如果是顶级节点的删除操作，就不需要进行下面的操作了。
          // 处理懒加载节点，先清空再渲染。
          // 利用refs得到表格的数据结构，拿到 lazyTreeNodeMap 这个懒加载对象。
          // 这里面存储的就是你之前加载的所有节点数据对象了。然后清空操作节点的父节点对象。
          this.$refs.pager.store.states.lazyTreeNodeMap[
            row.fjd
          ] = []  
          // 根据我们声明的maps对象，拿到父节点。然后手动进行接口请求，重新进行数据渲染。
          const { tree, treeNode, resolve } = this.treeObj[row.fjd] 
          this.loadTable(tree, treeNode, resolve)
          this.$message.success('删除成功')
        } catch (e) {
          this.$message.warning(e.message)
        }
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
       })
      })
  }
  }
}

上面是删除操作的动态渲染，新增，修改同理。主要就是一个先清空、再重新渲染的过程。

撒花~~~~❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀