文章目录

  • 1 配置子路由
    • 1.1 router/index.js(添加路由)
    • 1.2 views/User.vue(用户管理)
    • 1.3 验证路由是否生效
  • 2 User.vue(静态页面)
    • 2.1 搜索框和表格的静态搭建
    • 2.2 用户表格的数据获取渲染
      • 2.2.1 user.js(准备数据)
      • 2.2.2 mock.js(拦截请求的URL)
      • 2.2.3 api.js(axios请求的URL)
    • 2.3 页面布局(User.vue)
      • 2.3.1 el-table(表格)
      • 2.3.2 性别数据的处理
      • 2.3.3 整体代码(User.vue)
  • 3 参考附录

配置子路由,添加新增按钮、搜索框、搜索按钮、表格,模拟数据,转换性别数据并显示在列表中。

1 配置子路由

1.1 router/index.js(添加路由)

在这里插入图片描述

1.2 views/User.vue(用户管理)

<template><div>user</div>
</template><script set

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

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

相关文章

AMPAK正基科技系列产品有哪些广泛应用于IOT物联网

關於正基AMPAK 智慧物聯網 無線射頻模組專家 專業品牌 正基科技是一家擁有超過 20 年無線模組研發、設計、生產、行銷與產品技術整合服務經驗的公司。 有專業的高頻模組硬體設計及軟體整合工程師團隊&#xff0c;具備豐富的客戶應用經驗&#xff0c;能因應客戶與市場導向的產品…

【PyTorch】环境配置

文章目录1. 配置cuda环境2. 配置conda环境3. 配置pytorch gpu环境1. 配置cuda环境 在命令行输入以下命令可以查看当前显卡驱动版本和最高支持的cuda版本 nvidia-smi根据cuda版本去官网下载并安装cuda 下载链接&#xff1a;https://developer.nvidia.com/cuda-toolkit-archive…

vue3实现实现手机/PC端录音:recorder-core

通过 recorder-core 这个插件实现录音recorder-core插件使用下方的js文件是安装后封装的一个js文件&#xff0c;在需要使用的地方直接引入这个文件&#xff1a;import record from “./recorderCore.js”;// 文件名称&#xff1a;recorderCore.js// recorder-core插件使用方式…

deepseek 本地部署,如何支持工具调用

这里需要考虑显卡是否和模型匹配&#xff0c;支不支持推理 先把模版拉取到本地&#xff1a;git clone https://github.com/sgl-project/sglang.git 我的位置是 /data/home/sglang 注意模版位于sglang下的examples/chat_template中 根据对应的模版部署模型&#xff0c;比如 …

Excel中运行VB的函数

“插入” -》 “模块”Function FormatCodeFlex(inputStr As String, Optional defaultVal As String "0") As StringOn Error GoTo ErrorHandlerDim parts() As StringDim i As Integer 使用 "-" 分割字符串parts Split(inputStr, "-") 确保至…

《零基础入门AI:深度学习之NLP基础学习》

一、自然语言处理&#xff08;NLP&#xff09;概述 1. 基本概念 ​ 自然语言处理&#xff08;Natural Language Processing, NLP&#xff09;是人工智能与计算语言学交叉的核心领域&#xff0c;致力于实现计算机对人类自然语言的自动理解、分析、生成与交互。其研究目标在于构…

保姆级Debezium抽取SQL Server同步kafka

前言&#xff1a; Debezium SQL Server连接器捕获SQL Server数据库模式中发生的行级更改。 官方2.0文档&#xff1a; Debezium connector for SQL Server :: Debezium Documentation 有关与此连接器兼容的SQL Server版本的信息&#xff0c;请参阅 SQL Server Database: 201…

鸿蒙安卓前端中加载丢帧:ArkWeb分析

序章&#xff1a;卡顿的数字世界 在每秒60帧的视觉交响乐中&#xff0c;每一帧都是精心编排的节拍。当这些节拍开始丢失——就像交响乐中突然静音的提琴部——我们便遭遇了加载丢帧的数字噩梦。这不是简单的性能下降&#xff0c;而是一场渲染管线的全面崩溃&#xff0c;是数字…

Spring Cloud Netflix学习笔记06-Zuul

文章目录概述什么是Zuul?Zuul 能干嘛&#xff1f;Zuul入门案例pom依赖application.yml启动类隐藏真实路径概述 什么是Zuul? Zuul包含了对请求的路由(用来跳转的)和过滤两个最主要功能&#xff1a; 其中路由功能负责将外部请求转发到具体的微服务实例上&#xff0c;是实现外…

c# 和 c++ 怎样结合

c# 和 c 怎样结合在软件开发中&#xff0c;C# 和 C 通常用于不同的场景和目的&#xff0c;但有时需要将它们结合使用以充分利用两种语言的优点。以下是几种常见的方法来实现 C# 和 C 的结合&#xff1a;1. P/Invoke&#xff08;Platform Invocation Services&#xff09;P/Invo…

开源分布式数据库(Dgraph)

Dgraph 是一款专为处理复杂关系数据设计的开源分布式图数据库&#xff0c;核心目标是提供高性能、高可扩展性的图数据存储与查询能力。其设计融合了原生图模型与分布式架构&#xff0c;支持 GraphQL 查询语言&#xff0c;适用于社交网络、知识图谱、推荐系统等场景。 一、技术架…

Apache ShenYu和Nacos之间的通信原理

这是一个非常经典的服务注册发现和动态配置管理的案例。ShenYu 作为网关,需要实时感知后端微服务的上线、下线以及其元数据信息(如 API 接口列表)的变化,同时它自身的配置也可能需要动态调整。Nacos 则作为注册中心和配置中心,扮演了“服务电话簿”和“动态配置仓库”的角…

强制重启导致Ubuntu24.04LTS amd的WIFI无法使用的解决方案

强制重启导致Ubuntu24.04LTS amd的WIFI无法使用的解决方案 前言 ‍ 我按下了<ctrl><alt><prtsc>组合键&#xff0c;然后按住<ctrl><alt>不放&#xff0c;让我的死机的图形化的Ubuntu强制重启&#xff0c;然后再次打开发现&#xff0c;我的ubu…

Java基础面试题02

引用&#xff1a;&#xff08;代码随想录的八股转免费了&#xff09;以下为网址 卡码笔记 本文为学习以上文章的笔记&#xff0c;如果有时间推荐直接去原网址 Java中的数据类型有哪些&#xff1f;分为哪两大类&#xff1f; (考点&#xff1a;Java数据类型及其分类) 【简单】 基…

RabbitMQ:SpringAMQP Fanout Exchange(扇型交换机)

目录一、案例需求二、基础配置三、代码实现扇形交换机也叫做广播交换机&#xff0c;通过交换机将消息发送给所有的队列。 生产者源码 消费者源码 一、案例需求 在RabbitMQ控制台中&#xff0c;声明队列fanout.queue1和fanout.queue2。在RabbitMQ控制台中&#xff0c;声明交换…

深度解析DeepSeek V3.1 :6850 亿参数开源模型如何以 71.6% 编码得分、68 倍成本优势重构全球 AI 竞争格局

深度解析DeepSeek V3.1 &#xff1a;6850 亿参数开源模型如何以 71.6% 编码得分、68 倍成本优势重构全球 AI 竞争格局当DeepSeek悄然将其 6850 亿参数的 V3.1 模型上传至 Hugging Face 平台时&#xff0c;这个看似低调的举动却在全球 AI 领域投下了一颗 “深水炸弹”。这款融合…

Java 大视界 -- Java 大数据在智能安防视频监控系统中的视频内容理解与智能预警升级(401)

Java 大视界 -- Java 大数据在智能安防视频监控系统中的视频内容理解与智能预警升级&#xff08;401&#xff09;引言&#xff1a;正文&#xff1a;一、传统安防监控的 “三重困局”&#xff1a;看不全、看不懂、反应慢1.1 人工盯屏 “力不从心”1.1.1 摄像头密度与人力的矛盾1…

ansible playbook 实战案例roles | 实现基于node_exporter的节点部署

文章目录一、核心功能描述二、roles内容2.1 文件结构2.2 主配置文件2.3 tasks文件内容2.4 vars文件内容免费个人运维知识库&#xff0c;欢迎您的订阅&#xff1a;literator_ray.flowus.cn 一、核心功能描述 这个 Ansible Role 的核心功能是&#xff1a;​自动化部署 Prometheu…

.NET Core MongoDB 查询数据异常及解决

.NET Core 查询 MongoDB异常消息Element _class does not match any field or property of class WebApiServer.Model.Enity.Ypxxx.图中写的修改实际是查询分页出现的异常&#xff0c;异常是查询转换为List<T>时出现的&#xff1a; 这个错误通常发生在MongoDB文档中包含的…

政策技术双轮驱动智慧灯杆市场扩容,塔能科技破解行业痛点

在新型城市基础设施建设不断加速&#xff0c;以及“双碳”战略持续深化这样的双重背景之下&#xff0c;智慧灯杆市场恰恰迎来了政策红利得以释放、技术出现迭代突破并且需求在持续升级的极为难得的黄金发展时期。智慧城市建设 的核心承载从国家层面所开展的全域智能化改造规划&…