当前位置: 首页 > news >正文

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 在垃圾回收器&#xff08;GC&#xff09;上有什么优化&#xff1f;如何调整 GC 算法以提升应用性能&#xff1f; 本文将从 JDK 17 与 JDK 21 的垃圾回收改进出发&#xff0c;结合代码示例解析优化方案&#xff0c;并提供实际项目中的调优策略&#xff0c;帮助…...

CNN-GRU卷积神经网络门控循环单元多变量多步预测,光伏功率预测(Matlab完整源码和数据)

代码地址&#xff1a;CNN-GRU卷积神经网络门控循环单元多变量多步预测&#xff0c;光伏功率预测&#xff08;Matlab完整源码和数据) CNN-GRU卷积神经网络门控循环单元多变量多步预测&#xff0c;光伏功率预测 一、引言 1.1、研究背景和意义 随着全球能源危机和环境问题的日…...

kotlin中expect和actual关键字修饰的函数作用

在 Kotlin 多平台编程中&#xff0c;expect 和 actual 关键字用于定义跨平台的抽象和具体实现。这种机制允许开发者声明一个平台无关的接口或函数签名&#xff08;使用 expect&#xff09;&#xff0c;然后在每个目标平台上提供具体的实现&#xff08;使用 actual&#xff09;。…...

鸿蒙音视频播放器:libwlmedia

libwlmedia 跨平台播放器wlmedia现在已经支持了鸿蒙(Harmony)平台了&#xff0c;SDK插件地址&#xff1a;libwlmedia 一、接入SDK 1.1 导入SDK ohpm i ywl5320/libwlmedia1.2 添加权限&#xff08;可选&#xff09; 如果需要播放网络视频&#xff0c;需要添加网络权限 #m…...

【devops】 Git仓库如何fork一个私有仓库到自己的私有仓库 | git fork 私有仓库

一、场景说明 场景&#xff1a; 比如我们Codeup的私有仓库下载代码 放入我们的Github私有仓库 且保持2个仓库是可以实现fork的状态&#xff0c;即&#xff1a;Github会可以更新到Codeup的最新代码 二、解决方案 1、先从Codeup下载私有仓库代码 下载代码使用 git clone 命令…...

CEF132编译指南 MacOS 篇 - 构建 CEF (六)

1. 引言 经过前面一系列的精心准备&#xff0c;我们已经完成了所有必要的环境配置和源码获取工作。本篇作为 CEF132 编译指南系列的第六篇&#xff0c;将详细介绍如何在 macOS 系统上构建 CEF132。通过配置正确的编译命令和参数&#xff0c;我们将完成 CEF 的构建工作&#xf…...

mysql大数据量分页查询

一、什么是‌MySQL大数据量分页查&#xff1f; MySQL大数据量分页查‌是指在使用MySQL数据库时&#xff0c;将大量数据分成多个较小的部分进行显示&#xff0c;以提高查询效率和用户体验。分页查询通常用于网页或应用程序中&#xff0c;以便用户能够逐步浏览结果集。 二、为什…...

计算机毕业设计SpringBoot校园二手交易小程序 校园二手交易平台(websocket消息推送+云存储+双端+数据统计)(源码+文档+运行视频+讲解视频)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

尚硅谷爬虫note003

一、函数 1. 函数的定义 def 函数名&#xff08;&#xff09;&#xff1a; 代码 2.函数的调用 函数名&#xff08;&#xff09; 3. 定义参数&#xff08;不调用函数不执行&#xff09; def sum&#xff08;a&#xff0c;b&#xff09; #形参 c a b print&#xff08;c&…...

【逆向工程】破解unity的安卓apk包

先了解一下普通apk包的逆向方法&#xff08;无加密或加壳&#xff09; 开发环境&#xff1a; 操作系统&#xff1a;windows 解apk包 下载工具&#xff1a;apktool【Install Guide | Apktool】按照文档说的操作就行&#xff0c;先安装java运行时环境【我安装的是jre-8u441-wind…...

稠密架构和稀疏架构

稠密架构和稀疏架构 flyfish 稠密架构 参数使用方面&#xff1a;稠密架构中的大部分参数在每次计算时都会被使用。也就是说&#xff0c;对于输入的每一个样本&#xff0c;模型的所有或大部分参数都会参与到计算过程中。计算特点&#xff1a;计算密集&#xff0c;需要对大量的…...

LeetCode --- 436周赛

题目列表 3446. 按对角线进行矩阵排序 3447. 将元素分配给有约束条件的组 3448. 统计可以被最后一个数位整除的子字符串数目 3449. 最大化游戏分数的最小值 一、按对角线进行矩阵排序 直接模拟&#xff0c;遍历每一个斜对角线&#xff0c;获取斜对角线上的数字&#xff0c;排…...

用easyExcel如何实现?

要使提供的 ExcelModelListener 类来解析 Excel 文件并实现批量存储数据库的功能&#xff0c;需要结合 EasyExcel 库来读取 Excel 数据。具体来说&#xff0c;可以使用 EasyExcel.read() 方法来读取 Excel 文件&#xff0c;并指定 ExcelModelListener 作为事件监听器。 下面是…...

从 X86 到 ARM :工控机迁移中的核心问题剖析

在工业控制领域&#xff0c;技术的不断演进促使着工控机从 X86 架构向 ARM 架构迁移。然而&#xff0c;这一过程并非一帆风顺&#xff0c;面临着诸多关键挑战。 首先&#xff0c;软件兼容性是一个重要问题。许多基于 X86 架构开发的工业控制软件可能无法直接在 ARM 架构上运行…...

大模型DeepSeek-R1学习

学习路线 机器学习-> 深度学习-> 强化学习-> 深度强化学习 大模型演进分支 微调&#xff1a; SFT 监督学习蒸馏&#xff1a;把大模型作为导师训练小模型RLHF&#xff1a;基于人类反馈的强化学习 PPO 近端策略优化 油门 - 重要性采样 权重 * 打分刹车 - clip 修剪…...

【STM32】H743的以太网MAC控制器的一个特殊功能

调试743的MAC&#xff0c;翻阅手册的时候&#xff0c;发现了一个有意思的功能 混杂模式 H743的MAC控制器&#xff0c;可以设置为混杂模式&#xff0c;这就意味着它可以做一些网络监控的应用&#xff0c;譬如连接具备端口镜像功能的交换机&#xff0c;然后直接代替PC实现网络数据…...

关于“i18n“在vue中的使用

关于"i18n"在vue中的使用 <!-- vue2中 --> <template><div>{{ $t("This campaign has expired.") }}}}</div> </template> <script> export default {created() {this.onLoading();},methods: {onLoading () {this.$…...

前缀树算法篇:前缀信息的巧妙获取

前缀树算法篇&#xff1a;前缀信息的巧妙获取 那么前缀树算法是一个非常常用的算法&#xff0c;那么在介绍我们前缀树具体的原理以及实现上&#xff0c;我们先来说一下我们前缀树所应用的一个场景&#xff0c;那么在一个字符串的数据集合当中&#xff0c;那么我们查询我们某个字…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...