el-table使用懒加载时,新增和删除,数据不更新问题

data() {
    treeNodeMap: new Map(), // 用于存储所有懒加载节点的数据
}

methods: {
    //懒加载时,将该节点的信息存入map集合
    loadExpandData(tree, treeNode, resolve) {
      this.treeNodeMap.set(tree.id,{tree, treeNode, resolve})
      getFgAssetTypeMain(tree.id).then(res => {  // 删除节点时,如果此节点没有为空时,走else
        if(res.data.list.length != 0) {
          resolve(res.data.list)
        }else {
          this.$set(this.$refs.refTable.$refs.JNPFTable.store.states.lazyTreeNodeMap, tree.id, {})
          getFgAssetTypeMain(tree.parent).then(res => {
            // 这里对el-table进行了二次封装,this.$refs可根据自己需求来改变
            this.$set(this.$refs.refTable.$refs.JNPFTable.store.states.lazyTreeNodeMap, tree.parent, res.data.list)
          })
        }
      })
    },
    //删除或修改某个节点时,调用该方法,并传入对应的节点id
    refreshRow(id) {
      const node = this.treeNodeMap.get(id)
      if(node != undefined) {
        const {tree, treeNode, resolve} = node
        this.loadExpandData(tree, treeNode, resolve)
      }
    },

}

  • 11
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以使用 `expand-row` 事件来实现 el-table懒加载,具体步骤如下: 1. 在 el-table 中设置 `:tree-props="{lazy:true, load:loadChildren}"`,其中 `lazy:true` 表示启用懒加载,`load:loadChildren` 表示加载远程子节点数据的方法为 `loadChildren`。 2. 在 `methods` 中定义 `loadChildren` 方法,该方法接收三个参数:`node` 表示当前节点,`resolve` 表示加载完成后的回调函数,`reject` 表示加载失败后的回调函数。 3. 在 `loadChildren` 方法中通过远程请求获取当前节点的子节点数据,然后将数据传给 `resolve` 函数。 4. 在 `expand-row` 事件中调用 `loadChildren` 方法,将当前节点和回调函数作为参数传递进去。 下面是一个示例代码: ```html <template> <el-table :data="tableData" :tree-props="{lazy:true, load:loadChildren}" @expand-row="expandRow" > <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [] } }, methods: { loadChildren(node, resolve, reject) { // 发送远程请求获取当前节点的子节点数据 axios.get(`/api/children?id=${node.id}`).then(response => { resolve(response.data) }).catch(error => { reject(error) }) }, expandRow(row, expandedRows) { // 调用 loadChildren 方法加载子节点数据 this.loadChildren(row, children => { row.children = children expandedRows.push(row) }) } } } </script> ``` 在上面的示例中,我们通过 `axios` 发送了一个远程请求来获取子节点数据,并通过 `resolve` 函数将数据传递给 el-table 组件。在 `expand-row` 事件中,我们调用了 `loadChildren` 方法来加载子节点数据,并将回调函数 `children => {row.children = children; expandedRows.push(row)}` 作为参数传递进去。在回调函数中,我们将子节点数据赋值给当前节点的 `children` 属性,并将当前节点加入到 `expandedRows` 数组中,以便展开当前节点可以正常显示子节点。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值