elementUI中table的树形结构的刷新、增加、修改、删除

11 篇文章 0 订阅
7 篇文章 0 订阅
本文详细介绍了在Vue.js应用中如何实现动态表格的数据刷新、增删改功能。`refreshHandle()`方法用于刷新表格数据,通过设置数据为空并延迟加载新的数据。`addLazyTableItem()`和`updateLazyTableItem()`分别实现了新增和编辑表格行数据,而`deleteLazyTableItem()`则用于删除行数据,确保了数据与视图的同步更新。
摘要由CSDN通过智能技术生成
    // 刷新
    refreshHandle() {
      this.dataListLoading = true
      const store = this.$refs.table.store
      store.states.data = []

      setTimeout(async () => {
        await this.getDataList()
      }, 500)
    },
    //点击新增按钮的新增方法:item为行数据
    addLazyTableItem(item) {
      const store = this.$refs.table.store
      let parent = null
      if (item.parentCode !== 0) {
        let map = store.states.lazyTreeNodeMap
        parent = map[item.parentId]
        if (!parent) {
          this.$set(map, item.parentId, [])
          parent = map[item.parentId]
        }
      } else {
        parent = store.states.data
      }
      this.$set(parent, parent.length, item)
    },
    
    //点击修改按钮的修改方法:item为行数据
    updateLazyTableItem(item) {
      const store = this.$refs.table.store
      const parent =
        item.parentId!== 0
          ? store.states.lazyTreeNodeMap[item.parentId]
          : store.states.data
      const index = parent.findIndex(
        (child) => child.id=== item.id
      )
      this.$set(parent, index, { ...parent[index], ...item })
    },
    
    //点击删除按钮的删除方法:item为行数据
    deleteLazyTableItem(item) {
      const store = this.$refs.table.store
      const parent =
        item.parentId!== 0
          ? store.states.lazyTreeNodeMap[item.parentId]
          : store.states.data
      const index = parent.findIndex(
        (child) => child.id=== item.id
      )
      parent.splice(index, 1)
    },
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值