1、首先獲取所有的學(xué)生信息并顯示在表格上，進(jìn)行分頁(yè)
后臺(tái)要求傳的參數(shù)：

后臺(tái)接口封裝：

element-ui創(chuàng)建數(shù)據(jù)。必須有HTML表格

<el-table :data="studentData" border style="width: 100%"><el-table-column prop="id" label="學(xué)號(hào)"></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="專業(yè)"></el-table-column><el-table-column prop="depart" label="院系"></el-table-column><el-table-column prop="term" label="學(xué)期"></el-table-column><el-table-column prop="year" label="年級(jí)"></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代表當(dāng)前對(duì)應(yīng)行</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>

新增學(xué)生信息模態(tài)框

<el-dialog title="新增學(xué)生信息" :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="學(xué)號(hào)" 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="專業(yè)" 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="學(xué)期"><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="年級(jí)" 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>

編輯學(xué)生信息模態(tài)框

<el-dialog title="編輯學(xué)生信息" :visible="editstudentForm" size="tiny" :modal-append-to-body='false' @close='closeDialog'><el-form ref="editsForm" :model="editsForm" label-width="80px"><el-form-item label="學(xué)號(hào)"><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="專業(yè)"><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="學(xué)期"><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="年級(jí)"><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:[], //所有學(xué)生信息數(shù)組置空 addstudentForm:false, //新增學(xué)生信息模態(tài)框 page: {pageSize: 10, //每頁(yè)條數(shù), 默認(rèn)10條totalRecords: 0, //總條數(shù)totalPages: 0, //總頁(yè)數(shù)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() //頁(yè)面內(nèi)初始加載就調(diào)用這個(gè)函數(shù) } methods:{ init(){ this.studentData = [], let {pageNum,pageSize} = this.page; //es6寫法// pageNum:頁(yè)數(shù)從0開始 //pageSize:每頁(yè)顯示10條this.$http.get(Main.getStudent(pageNum,pageSize)).then(res =>{let {errCode,errMsg}=res.data;this.page.totalRecords=res.data.totalRecords; //總條數(shù)if(errCode==0){const studentArray=res.data.dataList;this.studentData=studentArray;}else{alert(errMsg);} }, response => { })}// 每頁(yè)顯示多少條數(shù)據(jù) sizeChange(val) {this.page.pageSize = val;this.init(); }, //翻頁(yè) currentChange(val) {this.page.pageNum=val-1;console.log(this.page.pageNum);this.init(); },// 點(diǎn)擊模態(tài)框關(guān)閉按鈕關(guān)閉模態(tài)框 closeDialog(){this.addstudentForm = false;this.editstudentForm = false; },

新增數(shù)據(jù)條數(shù)
新增學(xué)生信息后臺(tái)提交參數(shù)

// 點(diǎn)擊新增按鈕 addStudent(){this.addstudentForm = true; //原來隱藏的新增信息模態(tài)框顯示 }, // 點(diǎn)擊新增學(xué)生信息模態(tài)框的確定按鈕（確定新增信息） 將所增信息提交給后臺(tái) studentAdd(){let studentList=this.addsForm; let {id,name,age,sex,major,depart,term,year} = studentList; //判斷數(shù)據(jù)是否為空if(id==''||name==''||age==''||sex==''||major==''||depart==''||term==''||year==''){this.$message.error('新增內(nèi)容每一項(xiàng)都不準(zhǔn)為空')}else{ //每一條都不為空時(shí)才向后臺(tái)發(fā)送http請(qǐng)求this.$http.post(Main.addStudent(),this.addsForm).then(res => {let {errCode,errMsg} = res.data;if(!errCode==1){this.$set(this.addsForm,{});this.init(); //重新渲染數(shù)據(jù)列表this.addstudentForm = false;}else{this.$message.error(errMsg); //彈出后臺(tái)返回錯(cuò)誤}}, response => {});} },

編輯修改數(shù)據(jù)和新增數(shù)據(jù)不一樣的地方在于，編輯要獲得原有數(shù)據(jù)在原有數(shù)據(jù)上面修改
編輯修改信息需要向后臺(tái)提交的參數(shù)

// 點(diǎn)擊編輯按鈕 studentEdit(index,row){this.editstudentForm = true; //編輯信息模態(tài)框顯示this.editsForm = Object.assign({}, row); 獲得所有數(shù)據(jù)顯示在編輯信息模態(tài)框里面 }, // 點(diǎn)擊編輯信息彈框的確定按鈕 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("修改內(nèi)容除了不可編輯的每一項(xiàng)都不準(zhǔn)為空")}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 => {});} },

刪除當(dāng)前對(duì)應(yīng)行數(shù)據(jù)
后臺(tái)傳 id和role進(jìn)行刪除

studentDelete(user){this.$confirm('此操作將永久刪除學(xué)生 ' + user.name + ', 是否繼續(xù)?', '提示', { type: 'warning' }).then(() => { // 向服務(wù)端請(qǐng)求刪除this.$http.delete(Main.deleteStudent(user.id,0)).then((response) => {this.$message.success('成功刪除了學(xué)生' + user.name + '!');this.init()}).catch((response) => {this.$message.error('刪除失敗!');});}) .catch(() => {this.$message.info('已取消操作!');}); },}}，

頁(yè)面圖效果
分頁(yè)

編輯

刪除

總結(jié)

以上是生活随笔為你收集整理的vue+element-ui实现数据的增删改查及分页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。