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>

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

}

}，
//頁面圖效果

分頁

編輯

 

刪除：

 

付出不必定有回報，但不付出必定沒有回報！

以上內容爲本身項目中所得，如有不足望指出！