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
    评论
Element UI的`el-table`组件中,如果你想在已有表格的基础上添加新的数据行,你可以使用`rowspan`和`expanded-row-keys`属性来动态渲染。这里是一个简单的步骤说明: 1. 首先,确保你已经初始化了一个`el-table`实例,并且它有一个`data`属性来存储原始数据。 ```html <template> <el-table :data="tableData" ref="table"> <!-- 表头部分 --> <el-table-column type="index"></el-table-column> <!-- 其他列 --> </el-table> </template> <script> export default { data() { return { tableData: [] // 初始的数据数组 }; }, methods: { addNewRow(newData) { // 添加新数据 this.tableData.push(newData); // 如果你想让新添加的行默认展开,可以这样做: this.$refs.table.setCurrentKey(newData.key || newData.id); // 假设你有key或id字段 // 或者使用 `expanded-row-keys` 来控制展开状态 // 这里假设`expandedRowKeys`已经在data或方法中定义过 if (!this.expandedRowKeys.includes(newData.key)) { this.expandedRowKeys.push(newData.key); } } } }; </script> ``` 在`methods`中,`addNewRow`方法接收新的数据对象`newData`,然后将其追加到`tableData`数组中。如果希望新添加的行立即展开,可以通过`setCurrentKey`方法设置当前展开的行。 如果你需要在表格中的特定位置插入新行,或者有更多的数据操作需求,你可能需要根据具体业务场景调整代码。记得`el-table`的更新是异步的,所以在添加数据后,可能需要手动触发一次表格的更新,例如: ```javascript this.$nextTick(() => { this.$refs.table.doLayout(); }); ``` 如果你想要详细了解如何监听数据变化后自动刷新表格,或者如何处理分页、懒加载等情况,可以继续提问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值