vue+element-ui实现数据的增删改查及分页

1、首先获取所有的学生信息并显示在表格上，进行分页
后台要求传的参数：

后台接口封装：

element-ui创建数据。必须有HTML表格

<el-table :data="studentData" border style="width: 100%"><el-table-column prop="id" label="学号"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="age" label="年龄"></el-table-column><el-table-column prop="sex" label="性别"></el-table-column><el-table-column prop="major" label="专业"></el-table-column><el-table-column prop="depart" label="院系"></el-table-column><el-table-column prop="term" label="学期"></el-table-column><el-table-column prop="year" label="年级"></el-table-column><el-table-column prop="role" label="角色"></el-table-column><el-table-column label="操作"><template scope="scope"><el-button type="primary" size="small" @click="studentEdit(scope.$index, scope.row)">编辑</el-button><el-button type="danger" size="small" @click="studentDelete(scope.row)">删除</el-button>     //scope.row代表当前对应行</template></el-table-column>
</el-table>
<div class="block" style="height:70px;"><el-pagination@size-change="sizeChange"@current-change="currentChange":page-sizes="[10,20,30,40]":page-size="page.pageSize"layout="total, sizes, prev, pager, next":total="page.totalRecords"></el-pagination>
</div>

新增学生信息模态框

<el-dialog title="新增学生信息" :visible="addstudentForm" size="tiny" :modal-append-to-body='false' @close='closeDialog'><el-form id="#addsForm" ref="addsForm" :model="addsForm" label-width="80px"><el-form-item label="学号" prop="id"><el-input  v-model="addsForm.id" max-length="10"></el-input></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="addsForm.name"></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model="addsForm.age"></el-input></el-form-item><el-form-item label="性别" prop="sex"><el-input v-model="addsForm.sex"></el-input></el-form-item><el-form-item label="专业" prop="major"><el-input v-model="addsForm.major"></el-input></el-form-item><el-form-item label="院系" prop="depart"><el-input v-model="addsForm.depart"></el-input></el-form-item><el-form-item label="学期"><el-select v-model="addsForm.term" value-key="id"><el-option v-for="item in termArry"  :key="item.id" :label="item.name" :value="item.id"></el-option></el-select></el-form-item><el-form-item label="年级" prop="year"><el-input v-model="addsForm.year"></el-input></el-form-item><el-form-item label="角色" prop="role"><el-input v-model="addsForm.role" disabled="disabled"></el-input></el-form-item><el-form-item><el-button type="primary" @click="studentAdd()">确定</el-button><el-button @click="addstudentForm = false;canceladdT('formt')">取消</el-button></el-form-item></el-form>
</el-dialog>

编辑学生信息模态框

<el-dialog title="编辑学生信息" :visible="editstudentForm" size="tiny" :modal-append-to-body='false' @close='closeDialog'><el-form ref="editsForm" :model="editsForm" label-width="80px"><el-form-item label="学号"><el-input  v-model="editsForm.id" max-length="10" disabled="disabled"></el-input></el-form-item><el-form-item label="姓名"><el-input v-model="editsForm.name"></el-input></el-form-item><el-form-item label="年龄"><el-input v-model="editsForm.age"></el-input></el-form-item><el-form-item label="性别"><el-input v-model="editsForm.sex"></el-input></el-form-item><el-form-item label="专业"><el-input v-model="editsForm.major"></el-input></el-form-item><el-form-item label="院系"><el-input v-model="editsForm.depart"></el-input></el-form-item><el-form-item label="学期"><el-select v-model="editsForm.term" value-key="id"><el-option v-for="item in termArry"  :key="item.id" :label="item.name" :value="item.id"></el-option></el-select></el-form-item><el-form-item label="年级"><el-input v-model="editsForm.year"></el-input></el-form-item><el-form-item label="角色"><el-input v-model="editsForm.role" disabled="disabled"></el-input></el-form-item><el-form-item label="密码"><el-input v-model="editsForm.passwd" disabled="disabled"></el-input></el-form-item><el-form-item><el-button type="primary" @click="studentcEdit()">确定</el-button><el-button @click="editstudentForm = false">取消</el-button></el-form-item></el-form>
</el-dialog>

js代码

export default{data(){return{studentData:[],  //所有学生信息数组置空
addstudentForm:false, //新增学生信息模态框
page: {pageSize: 10, //每页条数,  默认10条totalRecords: 0, //总条数totalPages: 0, //总页数pageNum:0
},
addsForm:{id:'',name:'',age:"",sex:'',major:'',depart:'',term:'',year:'',role:'0'
},
editsForm:{id:'',name:'',age:"",sex:'',major:'',depart:'',term:'',year:'',role:'0',passwd:''
},}
}
mounted(){this.init() //页面内初始加载就调用这个函数
}
methods:{init(){this.studentData = [],
let {pageNum,pageSize} = this.page; //es6写法// pageNum:页数从0开始
//pageSize:每页显示10条this.$http.get(Main.getStudent(pageNum,pageSize)).then(res =>{let {errCode,errMsg}=res.data;this.page.totalRecords=res.data.totalRecords; //总条数if(errCode==0){const studentArray=res.data.dataList;this.studentData=studentArray;}else{alert(errMsg);}
}, response => {})}// 每页显示多少条数据
sizeChange(val) {this.page.pageSize = val;this.init();
},
//翻页
currentChange(val) {this.page.pageNum=val-1;console.log(this.page.pageNum);this.init();
},// 点击模态框关闭按钮关闭模态框
closeDialog(){this.addstudentForm = false;this.editstudentForm = false;
},

新增数据条数
新增学生信息后台提交参数

// 点击新增按钮
addStudent(){this.addstudentForm = true;   //原来隐藏的新增信息模态框显示
},
// 点击新增学生信息模态框的确定按钮（确定新增信息） 将所增信息提交给后台
studentAdd(){let studentList=this.addsForm;  let {id,name,age,sex,major,depart,term,year} = studentList;
//判断数据是否为空if(id==''||name==''||age==''||sex==''||major==''||depart==''||term==''||year==''){this.$message.error('新增内容每一项都不准为空')}else{//每一条都不为空时才向后台发送http请求this.$http.post(Main.addStudent(),this.addsForm).then(res => {let {errCode,errMsg} = res.data;if(!errCode==1){this.$set(this.addsForm,{});this.init();   //重新渲染数据列表this.addstudentForm = false;}else{this.$message.error(errMsg);  //弹出后台返回错误}}, response => {});}
},

编辑修改数据和新增数据不一样的地方在于，编辑要获得原有数据在原有数据上面修改
编辑修改信息需要向后台提交的参数

// 点击编辑按钮
studentEdit(index,row){this.editstudentForm = true; //编辑信息模态框显示this.editsForm = Object.assign({}, row);  获得所有数据显示在编辑信息模态框里面
},
// 点击编辑信息弹框的确定按钮
studentcEdit(){let studenteList=this.editsForm;console.log(studenteList);let {name,age,sex,major,depart,term,year} = studenteList;if(name==''||age==''||sex==''||major==''||depart==''||term==''||year==''){this.$message.error("修改内容除了不可编辑的每一项都不准为空")}else{this.$http.put(Main.changeStudenet(),this.editsForm).then(res => {let {errCode,errMsg} = res.data;if(!errCode==1){this.init();this.editstudentForm  = false;}else{this.$message.error(errMsg);}}, response => {});}
},

删除当前对应行数据
后台传 id和role进行删除

studentDelete(user){this.$confirm('此操作将永久删除学生 ' + user.name + ', 是否继续?', '提示', { type: 'warning' }).then(() => { // 向服务端请求删除this.$http.delete(Main.deleteStudent(user.id,0)).then((response) => {this.$message.success('成功删除了学生' + user.name + '!');this.init()}).catch((response) => {this.$message.error('删除失败!');});}) .catch(() => {this.$message.info('已取消操作!');});
},}}，

页面图效果
分页

编辑

删除

vue+element-ui实现数据的增删改查及分页相关推荐

从零开始的VUE项目-03（数据的增删改查）
代码svn地址 (用户名:liu,密码;123) 这一篇中,我们要实现的基本就是这么个东西这个页面就是我们创建的DataManagement.vue页面,我们的主要代码将写在这里面,这个表格我们将用 ...
vue访问php时做增删改查,node连接mysql生成接口，vue通过接口实现数据的增删改查（一）...
武汉加油遇新是直朋能到分览支体调!中国加油! 想必许多干用是处框它观有理近货框万理架是察放是近学vue的小伙伴想连接数据库,对数据进行增删改查吧,奈何不知道怎么实现.作为一路踩坑的我,为大家带来我的一 ...
jsp连接数据库，及数据的增删改查，分页
一.概念 *****1. 为了能让程序操作数据库,对数据库中的表进行操作,每一种数据库都会提供一套连接和操作该数据库的驱动,而且每种数据库的驱动都各不相同,例如mysql数据库使用mysql驱动,or ...
SpingBoot中使用MyBatis和pagehelper实现数据的增删改查和分页
文章目录一.认识MyBatis CRUD注解映射注解高级注解二.用MyBatis实现数据的增加.删除.修改.查询和分页 1.创建springboot项目并引入依赖 2.实现数据表的自动初始化 ...
创建Dao接口，用impl类实现对数据的增删改查
大家在JAVA的学习过程中都知道DAO是一个为数据库或其他持久化机制提供了抽象接口的对象,在不暴露数据库实现细节的前提下提供了各种数据操作,然后在impl类中实现对DAO的具体操作. 放一个经典的DA ...
vue修改数据连接数据库_vue实现数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
Vue+ElementUI纯前端技术实现对表格数据的增删改查
Vue+ElementUI纯前端技术实现对表格数据的增删改查页面展示效果一.页面结构分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...
Node+Vue实现对数据的增删改查
这是一个用于学生签到的小例子.主要用到的技术有node和Vue:用node搭建小型服务器,配置好路由,前端用vue写好组件,数据库采用的是mysql. 文件结构如下: 主要是功能是对数据的增删 ...
vue实现对数据的增删改查(CURD)
vue实现对数据的增删改查(CURD) 导语: 网上看到一个写的比较好的学习文章,转载分享一下在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的 ...

vue+element-ui实现数据的增删改查及分页

vue+element-ui实现数据的增删改查及分页相关推荐

最新文章

热门文章