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

SpringBoot + Vue 微人事 项目 (第八天)

基础信息设置

在这里插入图片描述

  • 在该页面添加一个大div,然后添加一个tab选项卡,Element UI里面有

在这里插入图片描述
把代码复制到大div里面,把里面的label和name属性改成我们想要的,再把@tab-click="handleClick"去掉

 <div><el-tabs v-model="activeName" ><el-tab-pane label="部门管理" name="first">部门管理</el-tab-pane><el-tab-pane label="职位管理" name="second">职位管理</el-tab-pane><el-tab-pane label="职称管理" name="third">职称管理</el-tab-pane><el-tab-pane label="奖惩规则" name="fourth">奖惩规则</el-tab-pane><el-tab-pane label="权限组" name="fourth2">权限组</el-tab-pane></el-tabs></div>

在data里面设置activeName属性,activeName:‘second’:默认显示第二个

export default {name: "SysBasic",data(){return{activeName:'second',}},

效果如下图所示:
![在这里插入图片描述](https://img-blog.csdnimg.cn/e8e18f36c88342608d1c830594cfef1d.png

  • 一共有五个选项卡,可不可以直接在每一个选项卡里面直接写html标签呢,答案是可以的,但是这样写的话,就要写好久重复的,没法管理,这时我们可以想到通过组件化开发来节省资源。就是一个很复杂的页面我们可以拆分成很多个小页面,在把很多小页面拼接成一个完整的页面。
  • 组件可以放到components文件夹里面来,页面就要views文件夹中
  • 先把这5个组件定义好
  • 在这里插入图片描述

再引入这5个组件,在

    import EcMarna from '../../components/sys/basic/EcMarna'import JobLevelMarna from '../../components/sys/basic/JobLevelMarna'import PermissMarna from '../../components/sys/basic/PermissMarna'import PosMarna from '../../components/sys/basic/PosMarna'import DemMarna from '../../components/sys/basic/DepMarna'

引入之后并不能直接使用,还需要注册成组件,组件有key和value,key和value相同,可以只写一个,定义的组件想当于是自己定义的一个html标签

  components:{'DemMarna':DemMarna,'PosMarna': PosMarna,'PermissMarna':PermissMarna,'JobLevelMarna':JobLevelMarna,'EcMarna':EcMarna}

在这里插入图片描述

  • 把选项卡中的代码再修改一下:
    <div><el-tabs v-model="activeName" ><el-tab-pane label="部门管理" name="first"><EcMarna></EcMarna></el-tab-pane><el-tab-pane label="职位管理" name="second"><PosMarna></PosMarna></el-tab-pane><el-tab-pane label="职称管理" name="third"><JobLevelMarna></JobLevelMarna></el-tab-pane><el-tab-pane label="奖惩规则" name="fourth"><EcMarna></EcMarna></el-tab-pane><el-tab-pane label="权限组" name="fourth2"><PermissMarna></PermissMarna></el-tab-pane></el-tabs></div>

职位管理组件的编写

分析:职位管理组件里面有个输入框,有个添加按钮和一张表,可以分为两个div
在这里插入图片描述

 <el-inputsize="small"style="width: 300px;"placeholder="添加职位..."prefix-icon="el-icon-plus"v-model="pos.name"></el-input>

v-model:一会要添加的数据,这个添加的数据可以从服务端看一下,未来想以json的形式上传它,就可以在data里面声明name默认为空字符

 export default {name: "DepMarna",data() {return {pos: {name: ''}}}}

右边是一个蓝色的添加按钮 type=“primary” 表示是蓝色的 icon=“el-icon-plus”:+号的标记 size="small:小号的

<el-button type="primary" icon="el-icon-plus" size="small">添加</el-button>

在这里插入图片描述
接下来就是添加职位下面的表格了,Element UI也有很多表格模板的
在这里插入图片描述

<!--:data="tableDate 是data数据里面的tableData属性。表格里面显示的数据是json数组"-->
<!--el-table-column:表格中的每一列-->
<div class="posManaMain"><el-table:data="positions"stripesize="small"borderstyle="width: 70%"><el-table-columnprop="id"label="编号"width="55"></el-table-column><el-table-columnprop="name"label="职位名称"width="120"></el-table-column><el-table-columnprop="createDate"label="创建时间"></el-table-column></el-table>
</div>

在script标签里面的代码如下: plsitions:[]:从后端传递过来的json数据

export default {name: "PosMarna",data(){return{pos:{name:""},tableData: []}}}

在这里插入图片描述

相关文章:

SpringBoot + Vue 微人事 项目 (第八天)

基础信息设置 在该页面添加一个大div&#xff0c;然后添加一个tab选项卡&#xff0c;Element UI里面有 把代码复制到大div里面&#xff0c;把里面的label和name属性改成我们想要的&#xff0c;再把tab-click"handleClick"去掉 <div><el-tabs v-model"a…...

人工智能引领图文扫描新趋势

1. 背景和影响 近日&#xff0c;中国大学生服务外包创新创业大赛决赛在江南大学圆满落幕。为满足现代服务产业企业的现实需求&#xff0c;本次竞赛内容设计充分聚焦企业发展中所面临的技术、管理等现实问题&#xff0c;与产业的结合度更紧密&#xff0c;智能文字识别技术是大赛…...

ChatGPT在智能城市规划和交通优化中的应用如何?

智能城市规划和交通优化是应对城市化挑战、提高城市可持续性的重要领域。在这方面&#xff0c;ChatGPT作为一种强大的自然语言处理模型&#xff0c;可以发挥重要作用&#xff0c;帮助实现更智能、高效的城市规划和交通管理。本文将详细探讨ChatGPT在智能城市规划和交通优化中的…...

探索Perfetto:开源性能追踪工具的未来之光

探索Perfetto&#xff1a;开源性能追踪工具的未来之光 1. 引言 A. 介绍Perfetto的背景和作用 随着移动应用、桌面软件和嵌入式系统的不断发展&#xff0c;软件性能优化变得愈发重要。在这个背景下&#xff0c;Perfetto作为一款开源性能追踪工具&#xff0c;日益引起了开发者…...

A*算法图文详解

基本概念 A*算法最早于1964年在IEEE Transactions on Systems Science and Cybernetics中的论文《A Formal Basis for the Heuristic Determination of Minimum Cost Paths》中首次提出。其属于一种经典的启发式搜索方法&#xff0c;所谓启发式搜索&#xff0c;就在于当前搜索…...

[MySQL] — 数据类型和表的约束

目录 数据类型 数据类型分类 数值类型 tinyint类型 bit类型 小数类型 float decimal 字符串类型 char varchar char和varchar的区别 日期和时间类型 enum 和 set 表的约束 空属性 默认值 列描述 zeorfill 主键 创建表时在字段上指定主键 删除主键&#xff1a; 追…...

JetBrains IDE远程开发功能可供GitHub用户使用

JetBrains与GitHub去年已达成合作&#xff0c;提供GitHub Codespaces 与 JetBrains Gateway 之间的集成。 GitHub Codespaces允许用户创建安全、可配置、专属的云端开发环境&#xff0c;此集成意味着您可以通过JetBrains Gateway使用在 GitHub Codespaces 中运行喜欢的IDE进行…...

LVS 负载均衡集群

集群 集群&#xff08;Cluster&#xff09;是一组相互连接的计算机或服务器&#xff0c;它们通过网络一起工作以完成共同的任务或提供服务。集群的目标是通过将多台计算机协同工作&#xff0c;提高计算能力、可用性、性能和可伸缩性&#xff0c;适用于大量高并发的场景。 集群…...

Mongodb Ubuntu安装

Mongodb Ubuntu安装 1.更新软件源导入MongoDB的GPG密钥 sudo apt update sudo apt install -y dirmngr wget gnupg apt-transport-https ca-certificates software-properties-common gnupgwget -qO - https://www.mongodb.org/static/pgp/server-6.0.asc | sudo apt-key add…...

【Spring Boot 源码学习】自动装配流程源码解析(下)

自动装配流程源码解析&#xff08;下&#xff09; 引言往期内容主要内容4. 排除指定自动配置组件5. 过滤自动配置组件6. 触发自动配置事件 总结 引言 上篇博文&#xff0c;笔者带大家了解了自动装配流程中有关自动配置加载的流程&#xff1b; 本篇将介绍自动装配流程剩余的内…...

基于微信小程序的毕业设计题目200例

个人简介&#xff1a;7 年大厂程序员经历&#xff0c;擅长Java、微信小程序、Python、Android等&#xff0c;大家有这一块的问题可以一起交流&#xff01; 各类成品 java毕设 。javaweb&#xff0c;ssh&#xff0c;ssm&#xff0c;springboot等等项目框架&#xff0c;源码丰富&…...

【数据管理】什么是数据管理?

文章目录 前言常见内容主题领域数据类型元数据引用数据主数据交易数据 数据类型的特点数据类型之间的关系GIGO数据质量评估 数据质量管理数据治理数据安全 前言 数据管理&#xff0c;即对数据资源的管理。按照 DAMA &#xff08;国际数据管理协会&#xff09;的定义&#xff1…...

[oneAPI] 手写数字识别-LSTM

[oneAPI] 手写数字识别-LSTM 手写数字识别参数与包加载数据模型训练过程结果 oneAPI 比赛&#xff1a;https://marketing.csdn.net/p/f3e44fbfe46c465f4d9d6c23e38e0517 Intel DevCloud for oneAPI&#xff1a;https://devcloud.intel.com/oneapi/get_started/aiAnalyticsToolk…...

通过css设置filter 属性,使整个页面呈现灰度效果,让整个网页变灰

通过css设置filter 属性设置页面整体置灰 效果图: 通过设置 filter 属性为 grayscale(100%)&#xff0c;页面中的所有元素都会被应用灰色滤镜效果&#xff0c;使整个页面呈现灰度效果。 <style type"text/css"> html { filter: grayscale(100%); -webkit-f…...

ahooks.js:一款强大的React Hooks库及其API使用教程(一)

一、ahooks.js简介二、ahooks.js安装三、ahooks.js API介绍与使用教程1. useRequest2. useAntdTable3. useSize4. useBoolean5. useToggle6. useHover7. useDebounce8. useEventListener9. useFusionTable10. useKeyPress11. useLoading12. usePrevious13. useForm14. useUpdat…...

拟合圆算法源码(商业)

1、输入一些点 2、执行fitCircle算法 3、输出圆心(x,y)及半径r Box fitCircle(const std::vector<cv::Point2f>& points) {Box box;box.x = 0.0f;box.y = 0.0f;box.r = 0.0f;if (points.size() < 3){return box;}int i = 0;double X1 = 0;double Y1 = 0;doubl…...

第一章 IRIS 编程简介

文章目录 第一章 IRIS 编程简介简介ClassesRoutines 第一章 IRIS 编程简介 简介 IRIS 是一个高性能多模型数据平台&#xff0c;具有内置的通用编程语言 ObjectScript&#xff0c;以及对 Python 的内置支持。 IRIS 支持多进程并提供并发控制。每个进程都可以直接、高效地访问…...

Leetcode-每日一题【剑指 Offer 32 - III. 从上到下打印二叉树 III】

题目 请实现一个函数按照之字形顺序打印二叉树&#xff0c;即第一行按照从左到右的顺序打印&#xff0c;第二层按照从右到左的顺序打印&#xff0c;第三行再按照从左到右的顺序打印&#xff0c;其他行以此类推。 例如: 给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20…...

.NET应用UI组件DevExpress XAF v23.1 - 全新的日程模块

DevExpress XAF是一款强大的现代应用程序框架&#xff0c;允许同时开发ASP.NET和WinForms。DevExpress XAF采用模块化设计&#xff0c;开发人员可以选择内建模块&#xff0c;也可以自行创建&#xff0c;从而以更快的速度和比开发人员当前更强有力的方式创建应用程序。 在新版中…...

UBuntu18.04 Qt之双HDMI屏切换

UBuntu18.04 Qt之双HDMI接2个4K屏并分别设置分辨率、主屏、副屏 一、设置HDMI-2为主屏 在main函数里面添加&#xff1a; #include "mainwindow.h" #include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);{long nTotal 0;c…...

Ubuntu 24.04 环境实战:ROS 2 Kilted 实现 SLAM 建图与 Nav2 导航

一、构建地图 1、安装依赖 安装 slam_toolbox 算法库&#xff1a; sudo apt install ros-kilted-slam-toolbox安装 TurtleBot3 全套支持包&#xff1a; sudo apt install ros-kilted-turtlebot3*2、使用清华源 如果apt安装很慢&#xff0c;请先配置清华源&#xff1a; sud…...

Kali实战:CTF杂项题必备工具全解析

1. Kali Linux与CTF杂项题简介 第一次参加CTF比赛时&#xff0c;面对五花八门的杂项题完全无从下手。直到发现Kali Linux这个"瑞士军刀"&#xff0c;才真正打开了解题新世界。Kali Linux预装了300安全工具&#xff0c;其中约20%专门用于处理隐写术、文件分析等杂项题…...

3步实现会呼吸的界面边界:让表单交互体验提升300%的动态效果

3步实现会呼吸的界面边界&#xff1a;让表单交互体验提升300%的动态效果 【免费下载链接】motion-primitives UI kit to make beautiful, animated interfaces, faster. Customizable. Open Source. 项目地址: https://gitcode.com/gh_mirrors/mo/motion-primitives 在现…...

League Akari:英雄联盟玩家的终极智能辅助工具实战指南

League Akari&#xff1a;英雄联盟玩家的终极智能辅助工具实战指南 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否厌倦了在…...

项目分享|LLM驱动的多市场股票智能分析器

项目分享|LLM驱动的多市场股票智能分析器 引言 在股票投资分析中&#xff0c;实时行情跟踪、多维度数据解析和科学决策判断是核心需求&#xff0c;而个人投资者往往面临数据分散、分析耗时、缺乏专业工具的问题。由ZhuLinsen开源的daily_stock_analysis项目完美解决了这些痛点…...

中国空间智能,梦想照进现实

2026年初&#xff0c;AI教母李飞飞的AI公司World Labs再次获得一笔10亿美元的投资&#xff0c;投资名单除了传统投资机构外&#xff0c;还不乏英伟达、Autodesk等行业巨头&#xff0c;这清晰地传递出市场信号&#xff1a;继AI大语言模型之后&#xff0c;空间智能已成为AI的下一…...

5步征服显存难题:多语言MiniLM模型量化优化实战指南

5步征服显存难题&#xff1a;多语言MiniLM模型量化优化实战指南 【免费下载链接】paraphrase-multilingual-MiniLM-L12-v2 项目地址: https://ai.gitcode.com/hf_mirrors/ai-gitcode/paraphrase-multilingual-MiniLM-L12-v2 1. 诊断显存瓶颈 在部署paraphrase-multili…...

如何零配置搭建专业级视觉交互系统:MediaPipe TouchDesigner完全指南

如何零配置搭建专业级视觉交互系统&#xff1a;MediaPipe TouchDesigner完全指南 【免费下载链接】mediapipe-touchdesigner GPU Accelerated MediaPipe Plugin for TouchDesigner 项目地址: https://gitcode.com/gh_mirrors/me/mediapipe-touchdesigner 想要在TouchDes…...

Unity游戏开发:如何用UniTask实现可撤销的异步流程(附完整代码)

Unity游戏开发&#xff1a;UniTask实现可撤销异步流程的工程实践 在游戏开发中&#xff0c;异步操作的管理一直是让开发者头疼的问题。想象这样一个场景&#xff1a;玩家在教学关卡中反复尝试某个操作&#xff0c;需要随时回退到上一步&#xff1b;或者在剧情分支选择时&#…...

npm install 背后的依赖管理机制:为什么你的node_modules这么大?

npm install 背后的依赖管理机制&#xff1a;为什么你的node_modules这么大&#xff1f; 每次运行 npm install 后&#xff0c;看着飞速增长的 node_modules 文件夹&#xff0c;你是否曾好奇过这个"黑洞"究竟是如何形成的&#xff1f;今天我们就来揭开Node.js依赖管理…...