一篇文章说明白el-table的树形数据和懒加载,编辑,删除的局部更新

1.配置简单的树形懒加载

配置el-table的懒加载属性

<el-table
    ref="table"
    :data="tableList"
    row-key="keys"
    lazy
    :load="load"
    :tree-props="{hasChildren: 'hasChildren'}"
    >

hasChildren：为true是当前table行需要进行懒加载,反之,

row-key : 这个尤为关键,当我们懒加载时所绑定的row-keys绝对不能重复,如果后端出现重复的情况,那就需要我们前端进行生成

获取tableList的接口

async getData() 
      try {
        const params = {
          .....
        }
        const { code, data } = await httpRecipientPage(params)
        if (code === this.$RESPONSE_SUCCESS) {
          this.tableList = data?.records?.map((v, index) => ({
            ...v,
            keys: Date.now() + index, // 用于绑定rowKeys   有分组的id 会出现重复,会导致el-table的懒加载失败
            isChild: false, //加标识
            hasChildren: !!v.hasGroup, // 0 = 无分组 1 = 有分组
          }))
        }
      } catch (error) {
        console.log('🚀 ~ getData ~ error:', error)
      }
    },

当我们点击 这个下拉按钮时,就会触发load函数

load(tree, treeNode, resolve) {
      httpFindAddress({ phone: tree.contacts }).then(res => {
        const arr = res.data.map((v, index) => {
          return {
            ...v,
            hasChildren: !!v.hasGroup, // 0 = 无分组 1 = 有分组
            isChild: true, // 是否是子节点
            keys: Date.now() + index
          }
        })
        resolve(arr)
      })
}

此时现在就可以渲染懒加载的数据了.

2.懒加载数据的增删改,

我直接说方法,因为在此处,我踩了很多的坑,所以有必要重点说一下.

大体的逻辑就是我们在更新懒加载的table时,我们只需要更新load这个函数就可以了,这就是叫局部更新,而且也不会刷新页面,用户体验较好.

我们load方式的"tree, treeNode, resolve"参数就是我们点击当前下拉按钮 "行" 的数据

data中定义

data(){
    return {
       maps:new Map()
  }
}

我们需要使用Map方式将当前懒加载的参数存起来

parentId 定义这个字段用来存储当前父级的id(就是下拉按钮的那一行的id)

load(tree, treeNode, resolve) {
    // -- key值是点击节点的id
      // -- value是load接收的参{tree,treeNode,resolve}
      if (!this.maps.has(tree.id)) {
        this.maps.set(tree.id, { tree, treeNode, resolve })
      }
      httpFindAddress({ phone: tree.contacts }).then(res => {
        const arr = res.data.map((v, index) => {
          return {
            ...v,
            hasChildren: !!v.hasGroup, // 0 = 无分组 1 = 有分组
            isChild: true, // 是否是子节点
            parentId: tree.id, // 相当于父级id
            keys: Date.now() + index
          }
        })
        resolve(arr)
      })
}

当我们点击按钮时将当前行的数据,用变量存起来,

编辑的话,大家的业务不一样,涉及组件的传值,大家自行书写即可,我这边说一下删除的

<el-table-column  :label="$t('操作')" align="center" width="150px">
  <template v-slot="scope">
    <el-button @click.stop="editHandle(scope.row,'page')"  />
    <el-button @click.stop="delOrderSingle(scope.row)"/>
  </template>
</el-table-column>

删除的方法

此时的这个row就会有parentId,我们只要拿到parentId我们就可以从我们存储的Map中拿到load的参数,从而重新加载load函数

delOrderSingle(row, type) {
      try {
        const { code } = await httpRecipientDel({ id: this.currentRow.id })
        if (code === this.$RESPONSE_SUCCESS) {
          this.$noticeTips.success(this.$t('已经删除成功'))
          // 根据父级ID取出对应节点数据
          const { tree, treeNode, resolve } = this.maps.get(parentId)
          console.log('🚀 ~ childUpdate ~ this.maps.get(parentId):', 
          this.maps.get(parentId))
          this.load(tree, treeNode, resolve)
        }
      } catch (error) {
        console.log('🚀 ~ confirmHandle ~ error:', error)
      }
},

打印这个Map对象

已经拿到了,所以我们直接调用load函数即可.

如果大家报错,或者获取不到Map对象,一定多log,或者debugger,看看存Map的id和过去Map的id是不是一样.