1.首先获取所有的学生信息并显示在表格上，进行分页。
后台要求传的参数：
后台接口封装：
element-ui创建数据。必须有HTML表格
编辑
删除 //scope.row代表当前对应行
@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">
//新增学生信息模态框
确定
取消
//编辑学生信息模态框
确定
取消
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('已取消操作!');
});
},
}
}，
//页面图效果
分页
编辑
删除：
付出不一定有回报，但不付出一定没有回报！
以上内容为自己项目中所得，若有不足望指出！