优化芋道后台菜单管理卡顿问题element-plus版本

本文主要是介绍优化芋道后台菜单管理卡顿问题element-plus版本，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.原因分析

芋道后台菜单管理使用element-plus的table组件进行页面显示。因一次加载数据太多导致页面需全部进行渲染非常卡顿。

处理方案：1、修改页面数据只渲染父级。

2.dome源代码

    <el-tablev-if="refreshTable"v-loading="loading":data="list":default-expand-all="isExpandAll"row-key="id"lazy:load="load":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><el-table-column :show-overflow-tooltip="true" label="菜单名称" prop="name" width="250" /><el-table-column align="center" label="图标" prop="icon" width="100"><template #default="scope"><Icon :icon="scope.row.icon" /></template></el-table-column><el-table-column label="排序" prop="sort" width="60" /><el-table-column :show-overflow-tooltip="true" label="权限标识" prop="permission" /><el-table-column :show-overflow-tooltip="true" label="组件路径" prop="component" /><el-table-column :show-overflow-tooltip="true" label="组件名称" prop="componentName" /><el-table-column label="状态" prop="status" width="80"><template #default="scope"><dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" /></template></el-table-column><el-table-column align="center" label="操作"><template #default="scope"><el-buttonv-hasPermi="['system:menu:update']"linktype="primary"@click="openForm('update', scope.row.id)">修改</el-button><el-buttonv-hasPermi="['system:menu:create']"linktype="primary"@click="openForm('create', undefined, scope.row.id)">新增</el-button><el-buttonv-hasPermi="['system:menu:delete']"linktype="danger"@click="handleDelete(scope.row.id)">删除</el-button></template></el-table-column></el-table>

3.JS代码源代码

<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { handleTree} from '@/utils/tree'
import * as MenuApi from '@/api/system/menu'
import MenuForm from './MenuForm.vue'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'defineOptions({ name: 'SystemMenu' })const { wsCache } = useCache()
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗const loading = ref(true) // 列表的加载中
const list = ref<any>([]) // 列表的数据-只有父节点数据
const listTree = ref<any>([]) // 列表的数据-只有父节点数据
const listChildren=ref<any>([]) //处理children原数据
const queryParams = reactive({name: undefined,status: undefined
})
const queryFormRef = ref() // 搜索的表单
const isExpandAll = ref(false) // 是否展开，默认全部折叠
const refreshTable = ref(true) // 重新渲染表格状态
import { cloneDeep } from 'lodash-es'
/** 查询列表 */
const getList = async () => {loading.value = truetry {const data = await MenuApi.getMenuList(queryParams)listTree.value= handleTree(data)const tree=cloneDeep(listTree.value)tree.forEach((itme)=>{if(itme.children){itme.hasChildren=truedelete itme.children}})list.value=tree} finally {loading.value = false}}//加载子节点
const load = (row: any,_treeNode: any,resolve: (date: any[]) => void
) => {listChildren.value=[]getChildren(cloneDeep(listTree.value),row)let children = listChildren.valuesetTimeout(()=>{if(children){resolve(children)} },100)}//获取子节点数据
const getChildren=(arr,row)=>{arr.forEach(element => {if(row.id===element.parentId){listChildren.value.push(element)if(element.children?.length){element.hasChildren=truedelete element.children}}if(element.children?.length){getChildren(element.children,row)}});
}/** 搜索按钮操作 */
const handleQuery = () => {getList()
}/** 重置按钮操作 */
const resetQuery = () => {queryFormRef.value.resetFields()handleQuery()
}/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number, parentId?: number) => {formRef.value.open(type, id, parentId)
}/** 展开/折叠操作 */
const toggleExpandAll = () => {refreshTable.value = falseisExpandAll.value = !isExpandAll.valuenextTick(() => {refreshTable.value = true})
}/** 刷新菜单缓存按钮操作 */
const refreshMenu = async () => {try {await message.confirm('即将更新缓存刷新浏览器！', '刷新菜单缓存')// 清空，从而触发刷新wsCache.delete(CACHE_KEY.USER)wsCache.delete(CACHE_KEY.ROLE_ROUTERS)// 刷新浏览器location.reload()} catch {}
}/** 删除按钮操作 */
const handleDelete = async (id: number) => {try {// 删除的二次确认await message.delConfirm()// 发起删除await MenuApi.deleteMenu(id)message.success(t('common.delSuccess'))// 刷新列表await getList()} catch {}
}/** 初始化 **/
onMounted(() => {getList()
})
</script>