讲师分页条件查询修改删除

1.分页组件

　　<el-pagination
      @current-change="getList"
      :current-page="page"
      :page-size="limit"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

2.会调用getList方法查询

getList(page=1){
            this.page=page

            teacher.getTeacherList(this.page,this.limit,this.TeacherQuery)
            .then(response=>{
                this.list=response.data.rows,
                this.total=response.data.total
                console.log(this.list)
                console.log(this.total)
                


            })

3.条件查询

<!--查询表单-->

 <el-form :inline="true" class="demo-form-inline">

   <el-form-item>

     <el-input v-model="TeacherQuery.name" placeholder="讲师名"/>

   </el-form-item>


   <el-form-item>

     <el-select v-model="TeacherQuery.level" clearable placeholder="讲师头衔">

       <el-option :value="1" label="高级讲师"/>

       <el-option :value="2" label="首席讲师"/>

     </el-select>

   </el-form-item>


   <el-form-item label="添加时间">

     <el-date-picker

       v-model="TeacherQuery.begin"

       type="datetime"

       placeholder="选择开始时间"

       value-format="yyyy-MM-dd HH:mm:ss"

       default-time="00:00:00"

     />

   </el-form-item>

   <el-form-item>

     <el-date-picker

       v-model="TeacherQuery.end"

       type="datetime"

       placeholder="选择截止时间"

       value-format="yyyy-MM-dd HH:mm:ss"

       default-time="00:00:00"

     />

   </el-form-item>


   <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>

   <el-button type="default" @click="resetData()">清空</el-button>

    </el-form>

4.清空查询条件

 resetData(){
            this.TeacherQuery={},
            this.getList()

        }

5.修改和删除记录

　　1.添加按钮

<el-table-column label="操作" width="200" align="center">

      <template slot-scope="scope">

        <router-link :to="'/teacher/edit/'+scope.row.id">

            <el-button type="primary" size="mini" icon="el-icon-edit" >修改</el-button>

      </router-link>

          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>

     </template>

   </el-table-column>

　　2.在按钮上绑定事件

　　

@click="removeDataById(scope.row.id)"

　　3.定义apisrc/api/edu/teacher.js

removeDataById(id){
        return request({
            url: `/eduservice/teacher/${id}`,
            method: 'delete'
          })
    }

　　4.调用方法

 removeDataById(id){
               this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
                teacher.removeDataById(id).then(response=>{
                this.getList()
            })