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实现数据的增删改查及分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。