一、Tab标签页设置

tab标签引入

<div><el-tabs v-model="activeName" type="card"><el-tab-pane label="部门管理" name="depManager"><DepManager></DepManager></el-tab-pane><el-tab-pane label="职位管理" name="posManager"><PosManager></PosManager></el-tab-pane><el-tab-pane label="角色管理" name="roleManager"><RoleManager></RoleManager></el-tab-pane></el-tabs></div>

标签页面引入

二、页面开发

页面样式

<template><div><div><el-inputsize="small"class="addPosInput"placeholder="添加职位... "prefix-icon="el-icon-plus"v-model="pos.name"></el-input><el-button icon="el-icon-plus" size="small" type="primary">添加</el-button></div><div class="posManagerMain"><el-table:data="positions"borderstripesize="small"style="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></div>
</template><script>export default {name: "PosManager",data() {return {pos : {name : ""},positions: []}}}
</script><style scoped></style>

增删改查数据交互

数据结构:

{"status": 200,"msg": null,"obj": [{createDate: "2022-06-25"createDateFormate: "2022-06-25 17:45:20"createTime: "2022-06-25 17:45:20"createUserId: 1createUserName: "系统管理员"deleted: 0id: 1name: "技术总监"updateDate: "2022-06-25"updateDateFormate: "2022-06-25 17:45:25"updateTime: "2022-06-25 17:45:25"updateUserId: 1updateUserName: "系统管理员"}]
}

前端代码：

<template><div><div><el-inputsize="small"class="addPosInput"placeholder="添加职位... "prefix-icon="el-icon-plus"@keydown.enter.native="addPosition"v-model="pos.name"></el-input><el-button icon="el-icon-plus" size="small" type="primary" @click="addPosition">添加</el-button><el-button @click="deleteMany" type="danger" size="small" style="margin-top: 8px;" :disabled="multipleSelection.length==0">批量删除</el-button></div><div class="posManagerMain"><!-- 多选框的点击事件 @selection-change="handleSelectionChange--><el-table:data="positions"borderstripe@selection-change="handleSelectionChange"size="small"style="width: 70%"><!--                多选框--><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="id"label="编号"width="55"></el-table-column><el-table-columnprop="name"label="职位名称"width="120"></el-table-column><el-table-columnprop="createUserName"label="创建人"></el-table-column><el-table-columnprop="createTime"label="创建时间"></el-table-column><el-table-columnprop="updateUserName"label="更新人"></el-table-column><el-table-columnprop="updateTime"label="更新时间"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"@click="showEditView(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></div>
<!--        对话框--><el-dialogtitle="修改职位":visible.sync="dialogVisible"width="30%"><div><el-tag>职位名称</el-tag><el-input class="updatePosInput" size="small" v-model="updatePos.name"></el-input></div><span slot="footer" class="dialog-footer"><el-button size="small" @click="dialogVisible = false">取 消</el-button><el-button size="small" type="primary" @click="doUpdate">确 定</el-button></span></el-dialog></div>
</template><script>export default {name: "PosManager",data() {return {pos : {name : ""},dialogVisible:false,updatePos: {name:''},multipleSelection: [],positions: []}},//数据初始化mounted() {this.initPositions();},methods: {deleteMany() {this.$confirm('此操作将永久删除【' + this.multipleSelection.length + '】条记录, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {let ids = '?';this.multipleSelection.forEach(item => {ids += 'ids=' + item.id + '&';})this.deleteRequest("/system/basic/pos/" + ids).then( resp => {if (resp) {this.initPositions();}});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},handleSelectionChange(val) {this.multipleSelection = val;console.log(val);},showEditView(index,data) {// this.updatePos = data;//拷贝属性(防止点击【取消】按钮无法返回原来数值)Object.assign(this.updatePos,data);this.dialogVisible = true;},doUpdate() {this.putRequest("/system/basic/pos/",this.updatePos).then(resp => {if (resp) {//刷新数据this.initPositions();this.updatePos.name = '';//隐藏对话框this.dialogVisible = false;}});},handleDelete(index, data) {this.$confirm('此操作将永久删除【' + data.name + '】职位, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.deleteRequest("/system/basic/pos/" + data.id).then(resp => {if (resp) {this.initPositions();}})}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},addPosition() {if (this.pos.name) {this.postRequest("system/basic/pos/", this.pos).then(resp => {if (resp) {//刷新数据this.initPositions();//清空数据this.pos.name = '';}})} else {this.$message.error('职位名称不可以为空！');}},initPositions() {this.getRequest("/system/basic/pos/").then(resp => {if (resp) {this.positions = resp.obj;}})}}}
</script><style scoped>.addPosInput {width: 300px;margin-right: 8px;}.posManagerMain {margin-top: 10px;}.updatePosInput {width: 200px;margin-left: 8px;}</style>

注：能力有限，还请谅解，争取早日能够写出有质量的文章！

我是皮蛋布丁，一位爱吃皮蛋的热爱运动的废铁程序猿。

感谢各位大佬光临寒舍~

通过Element开发基础增删改查页面——Vue项目实战(三)相关推荐

Django学习笔记（10）——Book单表的增删改查页面
一,项目题目:Book单表的增删改查页面该项目主要练习使用Django开发一个Book单表的增删改查页面,通过这个项目巩固自己这段时间学习Django知识. 二,项目需求: 开发一个简单的Book增 ...
mybatis generator 自动生成在线生成器生成service controller 含基础增删改查自动生成工具只需要建表SQL语句
在线生成(目前只支持mysql):http://tools.49db.cn 已支持生成Service.Controller,含基础增删改查! (妈妈再也不用担心我整天写增删改查了 ^__^ ) 第3点 ...
php pdo基础增删改查 postgresql的主键自增设置 time()
主键自增参考https://www.javadrive.jp/postgresql/table/index10.html和https://stackoverflow.com/questions/48 ...
Springboot+vue 增删改查的小项目
Springboot+vue 增删改查的小项目文章目录 Springboot+vue 增删改查的小项目前言源码 1. 介绍 2.核心功能 3.软件架构 3.1 目录结构 4.项目流程 4.1导入 ...
微软Connect教程系列--自动生成增删改查页面工具介绍（二）
本章课程描述了vs2015的三个特点,其中主要将描述在vs2015下面,使用命令自动生成增删改查界面,具体如下: 1.web.config文件不在存在,用config.json替代,以适应支撑vs的插 ...
element ui 分页增删改查_【新插件发布】AzureAD运维Excel版插件，增删改查快10倍c以上！...
在笔者的BI项目开发中,用到了Azure的AzureSQL和AzureAS分析服务,此两大服务,可和AzureAD帐号体系打通.而AzureAD帐号,在其免费功能基础功能上,是免费使用的,随着项目开发 ...
ORM框架之Spring Data JPA(二）spring data jpa方式的基础增删改查
上一篇主要在介绍hibernate实现jpa规范,如何实现数据增删改查,这一篇将会着重spring data jpa 一.Spring Data JPA 1.1 Spring Data JPA介绍: ...
jsp+servlet的增删改查页面
今天终于是把java网页开发的基本东西都学完了,了解了java的基本操作.感觉java的环境还是很好的,有许多jar包可以使用,这样子就可以快速开发一个模块功能出来了. 这次我是自己写了一个从后台提取 ...
三年Java开发每天增删改查，终于靠着这份面试题，成功上岸京东
前言朋友本科毕业,做了3年外包,每天就是增删改查,坐吃等死状态,心里总觉得这样下去要丸,于是下定决心辞职,在家爆肝三个月,面试了10余家公司,最后拿到了京东Java岗的offer. 小编厚着脸皮要朋 ...

通过Element开发基础增删改查页面——Vue项目实战(三)

一、Tab标签页设置

tab标签引入

标签页面引入

二、页面开发

页面样式

增删改查数据交互

感谢各位大佬光临寒舍~

通过Element开发基础增删改查页面——Vue项目实战(三)相关推荐

最新文章

热门文章