19vue3实战-----菜单子树的展示
19vue3实战-----菜单子树的展示
- 1.实现目标
- 2.实现思路
- 3.实现步骤
- 3.1新建config配置文件
- 3.2封装组件
- 3.3使用组件
1.实现目标

如上,以上效果的难点是“在表格里面实现树形结构”。可以用element-plus框架中的table作为辅助:

可以自己查看文档了解怎么使用。
2.实现思路
上面的效果不难实现,无非就是搭建界面。这里我不用常规方法“一个一个页面搭建”,而是用之前写的文章https://blog.csdn.net/fageaaa/article/details/145572470中的方法--------通过配置生成页面。
3.实现步骤
3.1新建config配置文件
在menu文件夹下新建config配置文件:

menu/config/content.config.ts:
const contentConfig = {pageName: 'menu',header: {title: '菜单列表',btnTitle: '新建菜单'},propsList: [{ label: '菜单名称', prop: 'name', width: '180px' },{ label: '级别', prop: 'type', width: '120px' },{ label: '菜单url', prop: 'url', width: '150px' },{ label: '菜单icon', prop: 'icon', width: '200px' },{ label: '排序', prop: 'sort', width: '120px' },{ label: '权限', prop: 'permission', width: '150px' },{ type: 'timer', label: '创建时间', prop: 'createAt' },{ type: 'timer', label: '更新时间', prop: 'updateAt' },{ type: 'handler', label: '操作', width: '150px' }],childrenTree: {rowKey: 'id',treeProps: {children: 'children'}}
}
export default contentConfig
3.2封装组件
将各种各样的表格所在的内容区域封装为一个组件:

components/page-content/page-content.vue:
<template><div class="content"><div class="header"><h3 class="title">{{ contentConfig?.header?.title ?? '数据列表' }}</h3><el-button type="primary" @click="handleNewUserClick">{{ contentConfig?.header?.btnTitle ?? '新建数据' }}</el-button></div><div class="table"><el-table:data="pageList"borderstyle="width: 100%"v-bind="contentConfig.childrenTree"><template v-for="item in contentConfig.propsList" :key="item.prop"><template v-if="item.type === 'timer'"><el-table-column align="center" v-bind="item"><template #default="scope">{{ formatUTC(scope.row[item.prop]) }}</template></el-table-column></template><template v-else-if="item.type === 'handler'"><el-table-column align="center" v-bind="item"><template #default="scope"><el-buttonsize="small"icon="Edit"type="primary"text@click="handleEditBtnClick(scope.row)">编辑</el-button><el-buttonsize="small"icon="Delete"type="danger"text@click="handleDeleteBtnClick(scope.row.id)">删除</el-button></template></el-table-column></template><template v-else-if="item.type === 'custom'"><el-table-column align="center" v-bind="item"><template #default="scope"><slot:name="item.slotName"v-bind="scope":prop="item.prop"hName="why"></slot></template></el-table-column></template><template v-else><el-table-column align="center" v-bind="item" /></template></template></el-table></div><div class="pagination"><el-paginationv-model:current-page="currentPage"v-model:page-size="pageSize":page-sizes="[10, 20, 30]"layout="total, sizes, prev, pager, next, jumper":total="pageTotalCount"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div></div>
</template><script setup lang="ts">
...
interface IProps {contentConfig: {pageName: stringheader?: {title?: stringbtnTitle?: string}propsList: any[]childrenTree?: any}
}const props = defineProps<IProps>()
...
</script><style lang="less" scoped>
...
</style>
3.3使用组件
<template><div class="menu"><page-content :content-config="contentConfig" /></div>
</template><script setup lang="ts" name="menu">
import PageContent from '@/components/page-content/page-content.vue'
import contentConfig from './config/content.config'
</script><style scoped>
...
</style>
相关文章:
19vue3实战-----菜单子树的展示
19vue3实战-----菜单子树的展示 1.实现目标2.实现思路3.实现步骤3.1新建config配置文件3.2封装组件3.3使用组件 1.实现目标 如上,以上效果的难点是“在表格里面实现树形结构”。可以用element-plus框架中的table作为辅助: 可以自己查看文档了解怎么使用。 2.实现思路 上面的…...
【AI大模型】Ollama部署本地大模型DeepSeek-R1,交互界面Open-WebUI,RagFlow构建私有知识库
文章目录 DeepSeek介绍公司背景核心技术产品与服务应用场景优势与特点访问与体验各个DeepSeek-R系列模型的硬件需求和适用场景 Ollama主要特点优势应用场景安装和使用配置环境变量总结 安装open-webui下载和安装docker desktop配置镜像源安装open-webui运行和使用 RagFlow介绍主…...
JDK 17 和 JDK 21 在垃圾回收器(GC)上有什么优化?如何调整 GC 算法以提升应用性能?
JDK 17 和 JDK 21 在垃圾回收器(GC)上有什么优化?如何调整 GC 算法以提升应用性能? 本文将从 JDK 17 与 JDK 21 的垃圾回收改进出发,结合代码示例解析优化方案,并提供实际项目中的调优策略,帮助…...
CNN-GRU卷积神经网络门控循环单元多变量多步预测,光伏功率预测(Matlab完整源码和数据)
代码地址:CNN-GRU卷积神经网络门控循环单元多变量多步预测,光伏功率预测(Matlab完整源码和数据) CNN-GRU卷积神经网络门控循环单元多变量多步预测,光伏功率预测 一、引言 1.1、研究背景和意义 随着全球能源危机和环境问题的日…...
kotlin中expect和actual关键字修饰的函数作用
在 Kotlin 多平台编程中,expect 和 actual 关键字用于定义跨平台的抽象和具体实现。这种机制允许开发者声明一个平台无关的接口或函数签名(使用 expect),然后在每个目标平台上提供具体的实现(使用 actual)。…...
鸿蒙音视频播放器:libwlmedia
libwlmedia 跨平台播放器wlmedia现在已经支持了鸿蒙(Harmony)平台了,SDK插件地址:libwlmedia 一、接入SDK 1.1 导入SDK ohpm i ywl5320/libwlmedia1.2 添加权限(可选) 如果需要播放网络视频,需要添加网络权限 #m…...
【devops】 Git仓库如何fork一个私有仓库到自己的私有仓库 | git fork 私有仓库
一、场景说明 场景: 比如我们Codeup的私有仓库下载代码 放入我们的Github私有仓库 且保持2个仓库是可以实现fork的状态,即:Github会可以更新到Codeup的最新代码 二、解决方案 1、先从Codeup下载私有仓库代码 下载代码使用 git clone 命令…...
CEF132编译指南 MacOS 篇 - 构建 CEF (六)
1. 引言 经过前面一系列的精心准备,我们已经完成了所有必要的环境配置和源码获取工作。本篇作为 CEF132 编译指南系列的第六篇,将详细介绍如何在 macOS 系统上构建 CEF132。通过配置正确的编译命令和参数,我们将完成 CEF 的构建工作…...
mysql大数据量分页查询
一、什么是MySQL大数据量分页查? MySQL大数据量分页查是指在使用MySQL数据库时,将大量数据分成多个较小的部分进行显示,以提高查询效率和用户体验。分页查询通常用于网页或应用程序中,以便用户能够逐步浏览结果集。 二、为什…...
计算机毕业设计SpringBoot校园二手交易小程序 校园二手交易平台(websocket消息推送+云存储+双端+数据统计)(源码+文档+运行视频+讲解视频)
温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…...
尚硅谷爬虫note003
一、函数 1. 函数的定义 def 函数名(): 代码 2.函数的调用 函数名() 3. 定义参数(不调用函数不执行) def sum(a,b) #形参 c a b print(c&…...
【逆向工程】破解unity的安卓apk包
先了解一下普通apk包的逆向方法(无加密或加壳) 开发环境: 操作系统:windows 解apk包 下载工具:apktool【Install Guide | Apktool】按照文档说的操作就行,先安装java运行时环境【我安装的是jre-8u441-wind…...
稠密架构和稀疏架构
稠密架构和稀疏架构 flyfish 稠密架构 参数使用方面:稠密架构中的大部分参数在每次计算时都会被使用。也就是说,对于输入的每一个样本,模型的所有或大部分参数都会参与到计算过程中。计算特点:计算密集,需要对大量的…...
LeetCode --- 436周赛
题目列表 3446. 按对角线进行矩阵排序 3447. 将元素分配给有约束条件的组 3448. 统计可以被最后一个数位整除的子字符串数目 3449. 最大化游戏分数的最小值 一、按对角线进行矩阵排序 直接模拟,遍历每一个斜对角线,获取斜对角线上的数字,排…...
用easyExcel如何实现?
要使提供的 ExcelModelListener 类来解析 Excel 文件并实现批量存储数据库的功能,需要结合 EasyExcel 库来读取 Excel 数据。具体来说,可以使用 EasyExcel.read() 方法来读取 Excel 文件,并指定 ExcelModelListener 作为事件监听器。 下面是…...
从 X86 到 ARM :工控机迁移中的核心问题剖析
在工业控制领域,技术的不断演进促使着工控机从 X86 架构向 ARM 架构迁移。然而,这一过程并非一帆风顺,面临着诸多关键挑战。 首先,软件兼容性是一个重要问题。许多基于 X86 架构开发的工业控制软件可能无法直接在 ARM 架构上运行…...
大模型DeepSeek-R1学习
学习路线 机器学习-> 深度学习-> 强化学习-> 深度强化学习 大模型演进分支 微调: SFT 监督学习蒸馏:把大模型作为导师训练小模型RLHF:基于人类反馈的强化学习 PPO 近端策略优化 油门 - 重要性采样 权重 * 打分刹车 - clip 修剪…...
【STM32】H743的以太网MAC控制器的一个特殊功能
调试743的MAC,翻阅手册的时候,发现了一个有意思的功能 混杂模式 H743的MAC控制器,可以设置为混杂模式,这就意味着它可以做一些网络监控的应用,譬如连接具备端口镜像功能的交换机,然后直接代替PC实现网络数据…...
关于“i18n“在vue中的使用
关于"i18n"在vue中的使用 <!-- vue2中 --> <template><div>{{ $t("This campaign has expired.") }}}}</div> </template> <script> export default {created() {this.onLoading();},methods: {onLoading () {this.$…...
前缀树算法篇:前缀信息的巧妙获取
前缀树算法篇:前缀信息的巧妙获取 那么前缀树算法是一个非常常用的算法,那么在介绍我们前缀树具体的原理以及实现上,我们先来说一下我们前缀树所应用的一个场景,那么在一个字符串的数据集合当中,那么我们查询我们某个字…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
工程地质软件市场:发展现状、趋势与策略建议
一、引言 在工程建设领域,准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具,正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...
ip子接口配置及删除
配置永久生效的子接口,2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
