avue-表格树的懒加载和局部刷新

<avue-crud
      ref="crud"
      :option="option"
      :data="data"
      v-model="form"
      :permission="permissionList"
      :before-open="beforeOpen"
      @row-del="rowDel"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @refresh-change="refreshChangeY"
      @tree-load="treeLoad">
</avue>



data:
	maps: new Map(),
	option:{
		  azy: true,
		  dialogWidth: '60%',
		  tree: true,
		  border: true,
		  index: true,
		  viewBtn: true,
		  refreshBtn: true, // 是否显示“刷新”按钮
		  columnBtn: true, // 是否显示“显隐”按钮
		  align: 'center',
		  column:[...]
	}

methods:

	treeLoad(node, child, resolve) { // 懒加载子级
      const id = node.id
      this.maps.set(id, { node, child, resolve }) // 将当前选中节点数据存储到maps中
      fetchMenuTree(this.option.lazy, node.id).then(res => { // 请求接口查询子级
        resolve(res.data.data)
      })
    },
    updateTable() { // 在删除或者添加操作成功之后,调用此函数
      this.maps.forEach((item, key) => {
        const { node, child, resolve } = this.maps.get(key)
        this.treeLoad(node, child, resolve)
      })
    }
  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值