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

柔光的暖阳◎ 2022-10-05 13:53 910阅读 0赞

<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)
          })
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，910人围观）

还没有评论，来说两句吧...

相关阅读

相关懒加载和预加载的优劣势

懒加载（Lazy Loading）和预加载（Preloading）是网页优化技术，用于提升用户体验和网页性能。它们分别在加载页面资源方面有不同的优势和劣势。懒加载（Lazy

比眉伴天荒/ 2024年03月23日 22:07/ 0 赞/ 119 阅读

相关懒加载

<script type="text/javascript"> // 懒加载 // getBoundCl

向右看齐/ 2023年08月17日 15:55/ 0 赞/ 241 阅读

相关懒加载

为什么要使用懒加载？当我们进入到某个页面的时候，会有很多的图片，有些图片可能在下面，当我们点进页面但没有滑动全部展示时，其实下面的图片是没有啥作用的，白加载了，还降低网

青旅半醒/ 2022年12月13日 00:44/ 0 赞/ 388 阅读

相关懒加载(Lazy Loading) - MyBatis懒加载 - Spring懒加载

文章目录懒加载(Lazy Loading) MyBatis中懒加载的使用 Spring中懒加载的使用懒加载(

Dear 丶/ 2022年12月10日 15:53/ 0 赞/ 508 阅读

相关 elementui中el-tree控件懒加载和局部刷新

懒加载按照 elementui官方文档示例，效果图 ![在这里插入图片描述][20210316101939378.gif] template部分，需要结合 `laz

怼烎@/ 2022年11月10日 03:46/ 0 赞/ 513 阅读

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

<avue-crud ref="crud" :option="option" :data="data" v-model="form" :permission="perm

柔光的暖阳◎/ 2022年10月05日 13:53/ 0 赞/ 911 阅读

相关 Elementui树状结构表格树局部刷新

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA5aSpMjjls

港控/mmm°/ 2022年09月12日 06:50/ 0 赞/ 271 阅读

相关懒加载

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

快来打我*/ 2022年05月28日 05:35/ 0 赞/ 495 阅读

相关懒加载

懒加载 <template> <view> <scroll-view :scroll-into-view="'ss' + curr

亦凉/ 2021年07月25日 12:19/ 0 赞/ 865 阅读

相关 vue 图片懒加载和懒加载原理

在真实图片得到之前,展示懒加载设置的图片 1、安装 cnpm i vue-lazyload -S 2、main.js

你的名字/ 2021年07月24日 20:08/ 0 赞/ 982 阅读