• elementPlus + table 树形懒加载 新增，删除，修改 局部刷新

    #直接上代码#

     1.表格数据

     2.数据源

    1. <m-table 
    2. ref="cTable" 
    3. v-if="Object.keys(props.tableData).length" 
    4. :options="props.tableOptions"
    5. :data="props.tableData.data" 
    6. :isLoading="props.tableData.loading" 
    7. elementLoadingText="加载中..."
    8.  elementLoadingBackground="rgba(0,0,0,.8)" 
    9. isEditRow 
    10. lazy 
    11. row-key="id" 
    12. :load="loadTree"
    13. :tree-props="{ children: 'lstChildrenModule', hasChildren: 'hasChildren' }"
    14. :header-cell-style="props.tableClass.headerCellStyle" 
    15. border>
    16.       
    17.     <template #subAction="scope">
    18.           <el-tooltip effect="dark" content="添加子菜单" placement="top-start">
    19.               <el-button circle :icon="Plus" size="small" type="primary"
    20.               @click="toMenuEditAdd(scope.scope.row, 'subAdd')">el-button>
    21.           el-tooltip>
    22.            <el-tooltip effect="dark" content="修改平台" placement="top-start">
    23.                 <el-button circle :icon="Edit" size="small" type="primary"
    24.                   @click="toMenuEditAdd(scope.scope.row, 'edit')">el-button>
    25.                el-tooltip>
    26.                 <el-tooltip effect="dark" content="删除平台" placement="top-start">
    27.                    <el-button circle :icon="Delete" size="small" type="danger"
    28.                     @click="onRowDel(scope.scope.row, 'del')">el-button>
    29.                el-tooltip>
    30.      template>
    31.       
    32.  m-table>

    3 运行结果

    4.初始化懒加载数据

    1. let cTable = ref();
    2. const loadMap = new Map();
    3. /**
    4.  * 懒加载菜单
    5.  * @times 2023-09-04 16:46
    6.  * @link https://blog.csdn.net/a4561614
    7.  * @param {row,treeNode,resolve}
    8.  * @returns []
    9.  * @method loadTree 懒加载菜单
    10.  */
    11. const loadTree = async (row, treeNode, resolve) => {
    12.     let obj = {
    13.         "moduleNo": "",      //模块编号
    14.         "moduleName": "",    //模块名称
    15.         "parentNo": row.moduleNo,      //父编号
    16.         "appNo": row.appNo,         //平台编号
    17.         "isDelete": false
    18.     }
    19.     let res = await useMenuApi().getModulesAll(obj)
    20.     setTimeout(() => {
    21.         //将获取到的节点数据添加到loadMap缓存中,用于每次操作节点时进行过滤判断
    22.         loadMap.set(row.moduleNo, { row, treeNode, resolve });
    23.         resolve(res.results)
    24.     }, 1000)
    25. };

    5，全局添加/子菜单添加/编辑

    1. //引入每次点击保存再数据管理层用于判断更新节点
    2.  
    3. import { paremData } from '/@/stores/paremData';
    4.  
    5. /**
    6. * @author ken
    7. * @version 1.0
    8. * @method addMenuEditModal  弹窗
    9. * @description 新增菜单
    10. */
    11. let addMenuEditModal = (row,type) => {
    12.     state.menuData.type = type;
    13.     // menuRef.value?.restForm();
    14.     //如果是菜单添加时,当前行的模块名称为父节点parentNo数据
    15.     //如果是编辑时,当前行的模块名称为模块名称,当前行的父节点parentNo为parentNo数据
    16.     state.menDefaultsData=type=='edit'?row:{}
    17.     state.menDefaultsData.parentNo= type=='add'?'': (type=='edit'?row.parentNo:row.moduleNo);
    18.     //如果是点击编辑和新增子菜单时存入当前行的row数据
    19.     paremData().setTreeRow((type=='edit' || type=='subAdd' )?row: {});
    20.     state.menuData.title =type=='edit'?"编辑菜单": "添加菜单";
    21.     state.menuData.okTxt = type=='edit'?"确定编辑": "确定";
    22. 	menuDialogVisibles.value = true;
    23. }
    24.  
    25. /**
    26.  * @author ken
    27.  * @version 1.0
    28.  * @param   {form}
    29.  * @method confirmMenuData  
    30.  * @description  新增菜单提交数据
    31.  */
    32. const confirmMenuData = (form)=>{
    33.     let validate = form.validate()
    34. 	let model = form.getFormData()
    35. 	validate(async (valid) => {
    36. 		if (valid) {
    37.             if(model.parentNo instanceof Array){
    38.                 model.parentNo=model.parentNo.toString();
    39.             }
    40.             if(!model.appNo){
    41.                 model.appNo=paremData().getAppNo?paremData().getAppNo:row.appNo;
    42.             }
    43. 			let res = await useMenuApi().moduleSaveOrUpdate(model)
    44. 			if (!res.hasErr) {
    45.                   menuDialogVisibles.value = false;
    46. 				  ElMessage.success(res.msg);
    47.                   //如果是子菜单添加,通过当前点击的行内数据hasChildren判判断是否存在二级或者多级数据,当为true时 取parentNo作为父节点,为false 吧moduleNo为父节点
    48.                   //通过parentNo,moduleNo 到 loadMap 去缓存中查找数据,然后通过查找出来的数据中取 (id ,因为table中定义了 row-key="id")进行过滤重置或者清除Tree缓存数据,
    49.                   //如果不存在就直接刷新当前页面
    50.                  if(option.menuData.type=='subAdd' || option.menuData.type=='edit'){
    51.                     let row=paremData().getTreeRow;
    52.                       containerSideRef.value.reloadTree(row.hasChildren==false?row.parentNo:row.moduleNo);
    53.                  }
    54.                  if(option.menuData.type=='add'){
    55.                     getModulesPageData();
    56.                  }
    57. 				menuRef.value?.restForm()
    58. 			} else {
    59. 				ElMessage.error(res.msg);
    60. 			}
    61.  
    62. 		}
    63. 	})
    64. }
    65.  
    66. /**
    67.  * @author ken
    68.  * @version 1.0
    69.  * @param   {row,type}//当前行的数据,类型为删除
    70.  * @method removeMenuData  
    71.  * @description  删除子节点后，去刷新页面
    72.  */
    73. const removeMenuData = (row,type)=>{
    74.     ElMessageBox.confirm(`此操作将永久删除：${row.moduleName}, 是否继续?`, '提示', {
    75. 				confirmButtonText: '删除',
    76. 				cancelButtonText: '取消',
    77. 				type: 'warning',
    78. 			})
    79. 			.then(async() => {
    80.                let res=await useMenuApi().removeModules({moduleNo:row.moduleNo,isDelete:true});
    81.                if(!res.hasErr){
    82.                 containerSideRef.value.reloadTree(row.parentNo);
    83. 				ElMessage.success('删除成功');
    84.                }else{
    85.                 ElMessage.error(res.msg)
    86.                }
    87.               
    88. 			})
    89. 			.catch(() => {});
    90. }
    91.  
    92. /**
    93.  * @times 2023-09-04 16:46
    94.  * @link https://blog.csdn.net/a4561614
    95.  * @param {parentNo}
    96.  * @returns []
    97.  * @method reloadTree 重新懒加载菜单栏
    98.  */
    99. const reloadTree = (parentNo) => {
    100.     parentNo = parentNo ? parentNo : '';
    101.     //从const loadMap = new Map();判断是否存在
    102.     let objs = loadMap.get(parentNo);
    103.     if (objs == undefined || objs == '') {
    104.         //刷新页面
    105.         emits('refresh-menu-data')
    106.     } else {
    107.         //执行通过id清除缓存中的数据
    108.         const { row, treeNode, resolve } = objs;
    109.         cTable.value.removeCacheTree(row.id);
    110.         //重新懒加载一次
    111.         loadTree(row, treeNode, resolve);
    112.     }
    113. };
    114.  
    115. /**
    116.  * @author ken
    117.  * @version 1.0
    118.  * @param  row   刷新子节点数据
    119.  * @method removeCacheTree  清除事件
    120.  * @description  //刷新子节点数据
    121.  */
    122. const removeCacheTree=(id)=>{
    123.     //通过ref获取table的子节点数
    124.          if (table_ref.value.store.states.lazyTreeNodeMap.value[id].length > 1) {
    125.             //说明该节点下有多个子节点
    126.             table_ref.value.store.states.lazyTreeNodeMap[id] = [];
    127.           } else {
    128.             //说明该节点只有一个节点
    129.             table_ref.value.store.states.lazyTreeNodeMap.value[id] = [];
    130.        }
    131. }

    6.paremData.js

    1. import { defineStore } from 'pinia';
    2.  
    3.  
    4. /**
    5.  * 参数数据管理
    6.  * @methods setParemData 设置参数数据管理
    7.  */
    8. export const paremData = defineStore('paremStoreData', {
    9. 	state: () => ({
    10.        
    11.         treeRow:{}//树形菜单当前行缓存
    12. 	}),
    13.     getters:{
    14.        
    15.         getTreeRow(state){
    16.             return state.treeRow
    17.         }
    18.     },
    19. 	actions: {
    20.       
    21.         setTreeRow(row){
    22.             //存储树形行菜单数据
    23.             this.treeRow=row;
    24.         }
    25. 	},
    26. });

     ！完结

  • 相关阅读:
    Go uuid库介绍
    逆向分析-SeparationPreview.aip-分色预览-结构分析（一）-x64dbg条件日志打印-命令表达式
    HTML中如何给代码添加注释
    携程apollo配置中心服务端如何感知配置更新？
    基于深度学习的入侵检测系统综述文献概述——AI科研之路
    动态时间规整算法——DTW
    网络工程师怎么才算开窍
    汇编-在VisualStudio调试器中显示数组
    tomcat 7 任意文件上传漏洞（信息搜集与漏洞探测）
    我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：JVM的发展历程
  • 原文地址：https://blog.csdn.net/a4561614/article/details/132740789