文章管理+

该文章管理也是引用由 components文件夹下的 PageContainer 文件来的,在PageContainer中设置来 父传子,通过文章管理页面传递过去标题,具名插槽设置是否需要button按钮,以及默认插槽传递内容。

通过在 el-form表单中 添加 inliine属性,使得3个item 项 并排一行,默认是 true不写

对表格区域进行渲染, 直接定义响应结果中的 data数据,然后进行渲染

渲染文章标题下的列的内容,均为链接,并且无下划线

操作,用到作用域插槽

element-plus中下拉菜单里边提示是英文,如果希望是中文,需要进行配置

因为希望是所有都要配置为中文,所以在 app.vue组件中配置

文章管理该组件中的文章分类需要使用到 下拉菜单,需要请求后台数据动态渲染,跟ArticleChannel文章分类相关,以后也会需要使用到下拉菜单选择分类。所以直接封装为一个组件

子组件ChannelSelect 想要实现动态渲染双向绑定 请求参数中的 id,也就是父传子并且还要实现双向绑定,对于父子的双向绑定,使用到 :modelValue和 @update:modelValue。通过在 子组件 defineProps中用 modelValue进行接收,然后直接 :modelValue=”modelValue“ 进行绑定,要想子组件中下拉菜单里的选中内容变化并且父组件中 params 内容跟着变化(也就是子传父),那么通过 @update:modelValue=”emit(‘@update:model’,$event)“进行监听modelValue并进行子传父

vue3中的 v-model = ”params.cate_id“在子组件标签中 其实是 v-model:modelValue= "params.cate_id" ,这就是默认形式。

当然,也可以不是默认形式,例如在子组件标签中是 v-model : cid = "params.cate_id", 那么在子组件中双向绑定也就是 :cid 和 @update:cid。父传子接受的地方也就是变成了 cid

完成下拉菜单组件之后进行渲染 。

先封装接口

接着请求数据并进行渲染

在之前已经有写死的数据,然后进行了渲染了。只不过现在的数据是请求回来的而不是自己定义的,渲染部分就不用写了

请求回来的时间 结构比较乱,所以在工具夹utils中创建了一个模块 format来进行时间的格式化

然后作用域插槽来渲染时间,也不用删除 prop,如果配置了默认插槽那么就以默认插槽为主。因为不是直接渲染(prop),所以不是直接将format 直接往 prop中调

分页

官网 cv , 然后编写 每页条数变化和当前页变化的处理渲染逻辑

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/26607.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows对比MacOS

Windows对比MacOS 文章目录 Windows对比MacOS1-环境变量1-Windows添加环境变量示例步骤 1:打开环境变量设置窗口步骤 2:添加系统环境变量 2-Mac 系统添加环境变量示例步骤 1:打开终端步骤 2:编辑环境变量配置文件步骤 3&#xff1…

数据结构(初阶)(三)----单链表

单链表 概念 概念:链表是⼀种物理存储结构上⾮连续、⾮顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的。 结点 与顺序表不同的是,链表的结构类似于带车头的火车车厢,,链表的每个车厢都是独立…

Deepseek 开源周第一天:FlashMLA

Deepseek 隆重开启开源周!第一天我们迎来了FlashMLA。我很高兴带大家了解这项创新,揭秘 FlashMLA 为何能成为 AI 和 GPU 优化领域的变革者。 Deepseek 开源周的热门话题有哪些?

微软具身智能感知交互多面手!Magma:基于基础模型的多模态AI智能体

作者: Jianwei Yang, Reuben Tan, Qianhui Wu, Ruijie Zheng, Baolin Peng, Yongyuan Liang, Yu Gu, MuCai, SeonghyeonYe, JoelJang, Yuquan Deng, Lars Liden, Jianfeng Gao 单位:微软研究院,马里兰大学,威斯康星大学麦迪逊分校…

解决Docker Desktop启动后Docker Engine stopped问题

一、问题描述 当我们更新了Docker Desktop后,在重新打开就显示【Docker Engine stopped(Docker引擎已经停止)】,无法正常使用Docker,如下图所示: 二、问题分析 1、检查电脑主板的CPU是否开启虚拟化; 2、需检查Docker所需的功能是否开启; 3、检查WSL是否匹配; Docker的…

微信小程序:完善购物车功能,购物车主页面展示,详细页面展示效果

一、效果图 1、主页面 根据物品信息进行菜单分类,点击单项购物车图标添加至购物车,记录总购物车数量 2、购物车详情页 根据主页面选择的项,根据后台查询展示到页面,可进行多选,数量加减等 二、代码 1、主页面 页…

微服务学习(2):实现SpringAMQP对RabbitMQ的消息收发

目录 SpringAMQP是什么 为什么采用SpringAMQP SpringAMQP应用 准备springBoot工程 实现消息发送 SpringAMQP是什么 Spring AMQP是Spring框架下用于简化AMQP(高级消息队列协议)应用开发的一套工具集,主要针对RabbitMQ等消息中间件的集成…

echarts柱状图不是完全铺满容器,左右两边有空白

目录 处理前:echarts柱状图不是完全铺满容器,左右两边有空白处理前:通过调整 grid 组件配置处理后效果修改代码:1. 调整 grid 组件配置原理解决办法 2. 处理 xAxis 的 boundaryGap 属性原理解决办法 3. 调整 barMaxWidth 和 barMi…

【K8S】Kubernetes 基本架构、节点类型及运行流程详解(附架构图及流程图)

Kubernetes 架构 k8s 集群 多个 master node 多个 work nodeMaster 节点(主节点):负责集群的管理任务,包括调度容器、维护集群状态、监控集群、管理服务发现等。Worker 节点(工作节点):实际运…

千峰React:案例二

完成对html文档还有css的引入&#xff0c;引入一下数据&#xff1a; import { func } from prop-types import ./购物车样式.css import axios from axios import { useImmer } from use-immer import { useEffect } from reactfunction Item() {return (<li classNameacti…

C语言【指针篇】(四)

前言&#xff1a;正文1. 字符指针变量2. 数组指针变量2.1 数组指针变量是什么?2.2 数组指针变量怎么初始化 3. 二维数组传参的本质4. 函数指针变量4.1 函数指针变量的创建4.2 函数指针变量的使用4.3 两段有趣的代码4.3.1 typedef关键字 5. 函数指针数组6. 转移表 总结 前言&am…

GitCode 助力 python-office:开启 Python 自动化办公新生态

项目仓库&#xff1a;https://gitcode.com/CoderWanFeng1/python-office 源于需求洞察&#xff0c;打造 Python 办公神器 项目作者程序员晚枫在运营拥有 14w 粉丝的 B 站账号 “Python 自动化办公社区” 时&#xff0c;敏锐察觉到非程序员群体对 Python 学习的强烈需求。在数字…

对话Stack Overflow,OceanBase CTO 杨传辉谈分布式数据库的“前世今生”

近日&#xff0c; OceanBase CTO 杨传辉受邀出席全球知名开发者论坛 Stack Overflow 的最新一期播客节目&#xff0c;与 Stack Overflow 高级内容创作官 Ryan Donovan 展开对话。双方围绕分布式数据库的可靠性、一致性保障、HTAP 架构以及 AI 时代分布式数据库的发展趋势等热点…

小结:计算机网路中的性能指标小结

发现B站的这套课程不错&#xff0c;开始学习并笔记之&#xff1a;计算机网络微课堂&#xff08;有字幕无背景音乐版&#xff09;_哔哩哔哩_bilibili 1) 速率 2) 带宽 3) 吞吐量 带宽1 Gb/s的以太网&#xff0c;代表其额定速率是1 Gb/s&#xff0c;这个数值也…

seasms v9 注入漏洞 + order by注入+​information_schema​解决方法

目录 一、当注入时&#xff0c;information_schema被禁用的解决方法 1.通过sys库可以获取到表名和库名 2.通过无列名注入join获取列名 二、seasms v9 注入漏洞 三、order by注入 一、当注入时&#xff0c;information_schema被禁用的解决方法 information_schema数据库是My…

FFmpeg-chapter2-C++中的线程

1 常规的线程 一般常规的线程如下所示 // CMakeProject1.cpp: 定义应用程序的入口点。 //#include "CMakeProject1.h" #include <thread> using namespace std;void threadFunction(int index) {for (int i 0; i < 1000; i){std::cout << "Th…

【华三】从零开始掌握SR技术:原理、架构与应用全解析

【华三】从零开始掌握SR技术&#xff1a;原理、架构与应用全解析 一、初识SR&#xff1a;路由技术的新革命1.1 传统网络的困扰&#xff1a;从真实案例看技术瓶颈1.1.1 企业网络运维之痛问题2&#xff1a;流量工程实现困难问题3&#xff1a;网络智能化缺失 1.2 SR的诞生意义&…

CogBlobTool工具

CogBlobTool是一款专用于图像斑点检测于分析的 工具&#xff0c;通过灰度值阈值分割和特征过滤&#xff0c;帮助在复杂背景中提取目标区域&#xff0c;并计算几何属性。 效果图 注意&#xff1a;在这里只有一张图像可以不使用模板匹配工具 CogBlobTool工具的功能 斑点检测于…

大模型应用案例 | 大模型+金融运维,擎创携手某证券创新运维能力新范式

一、当大模型遇上金融运维&#xff1a;一场让告警处理“脱胎换骨”的变革 2022年底&#xff0c;ChatGPT的横空出世让AI技术彻底出圈&#xff1b;短短两年后&#xff0c;大模型已悄然潜入金融行业的“心脏地带”——运维系统。面对指数级暴增的告警信息、碎片化的处理流程&#…

Linux三种网络方式

前言 发现运维啥都得会&#xff0c;这周就遇到了网络问题自己无法解决&#xff0c;因此痛定思痛学一下。 参考文献 你管这破玩意叫网络&#xff1f; 桥接模式、NAT模式、仅主机模式&#xff0c;原来是这样工作的 交换机 构成局域网&#xff0c;实现所有设备之间的通信。 …