element ui 分页增删改查_vue+element-ui 实现数据的增删改查以及分页（举例新增学生）...

1.首先获取所有的学生信息并显示在表格上，进行分页。

后台要求传的参数：

后台接口封装：

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

编辑

删除 //scope.row代表当前对应行

//新增学生信息模态框

确定

取消

//编辑学生信息模态框

确定

取消

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('已取消操作!');

});

},

}

}，

//页面图效果

分页

编辑

删除：

付出不一定有回报，但不付出一定没有回报！

以上内容为自己项目中所得，若有不足望指出！