当前位置: 首页 > 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;那么我们查询我们某个字…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...