一、分页列表

1、定义api

创建文件 src/api/edu/teacher.js

  1. import request from '@/utils/request'
  3. const api_name = '/admin/edu/teacher'
  4. export default {
  6.   getPageList(page, limit, searchObj) {
  7.     return request({
  8.       url: `${api_name}/${page}/${limit}`,
  9.       method: 'get',
  10.       data: searchObj
  11.     })
  12.   }
  13. }

2、初始化vue组件

src/views/edu/teacher/list.vue

  1. <template>
  2.   <div class="app-container">
  3.     讲师列表
  4.   </div>
  5. </template>
  7. <script>
  8. import teacher from '@/api/edu/teacher'
  9. export default {
  12. data() {// 定义数据
  13.     return {}
  14. },
  16. created() { // 当页面加载时获取数据
  17.   this.fetchData()
  18. },
  20. methods: {
  21.   fetchData() { // 调用api层获取数据库中的数据
  22.     console.log('加载列表')
  23.   }
  24. }
  26. }
  27. </script>

3、定义data

  1. data() {
  2.   return {
  3.     listLoading: true, // 是否显示loading信息
  4.     list: null, // 数据列表
  5.     total: 0, // 总记录数
  6.     page: 1, // 页码
  7.     limit: 10, // 每页记录数
  8.     searchObj: {}// 查询条件
  9.   }
  10. },

4、定义methods

  1. methods: {
  2.    fetchData(page = 1) { // 调用api层获取数据库中的数据
  3.      console.log('加载列表')
  4.      this.page = page
  5.      this.listLoading = true
  6.      teacher.getPageList(this.page, this.limit, this.searchObj).then(response => {
  7.        // debugger 设置断点调试
  8.        if (response.success === true) {
  9.          this.list = response.data.rows
  10.          this.total = response.data.total
  11.        }
  12.        this.listLoading = false
  13.      })
  14.    }
  15. }

5、表格渲染

  1.  <!-- 表格 -->
  2.  <el-table
  3.    v-loading="listLoading"
  4.    :data="list"
  5.    element-loading-text="数据加载中"
  6.    border
  7.    fit
  8.    highlight-current-row>
  10.    <el-table-column
  11.      label="序号"
  12.      width="70"
  13.      align="center">
  14.      <template slot-scope="scope">
  15.        {{ (page - 1) * limit + scope.$index + 1 }}
  16.      </template>
  17.    </el-table-column>
  19.    <el-table-column prop="name" label="名称" width="80" />
  21.    <el-table-column label="头衔" width="80">
  22.      <template slot-scope="scope">
  23.        {{ scope.row.level===1?'高级讲师':'首席讲师' }}
  24.      </template>
  25.    </el-table-column>
  27.    <el-table-column prop="intro" label="资历" />
  29.    <el-table-column prop="gmtCreate" label="添加时间" width="160"/>
  31.    <el-table-column prop="sort" label="排序" width="60" />
  33.    <el-table-column label="操作" width="200" align="center">
  34.      <template slot-scope="scope">
  35.        <router-link :to="'/edu/teacher/edit/'+scope.row.id">
  36.          <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
  37.        </router-link>
  38.        <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
  39.      </template>
  40.    </el-table-column>
  41.     </el-table>

6、分页组件

  1.  <!-- 分页 -->
  2. <el-pagination
  3.   :current-page="page"
  4.   :page-size="limit"
  5.   :total="total"
  6.   style="padding: 30px 0; text-align: center;"
  7.   layout="total, prev, pager, next, jumper"
  8.   @current-change="fetchData"
  9. />

7、顶部查询表单

注意：
element-ui的 date-picker组件默认绑定的时间值是默认世界标准时间，和中国时间差8小时
设置 value-format=”yyyy-MM-dd HH:mm:ss” 改变绑定的值

  1.  <!--查询表单-->
  2.  <el-form :inline="true" class="demo-form-inline">
  3.    <el-form-item>
  4.      <el-input v-model="searchObj.name" placeholder="讲师名"/>
  5.    </el-form-item>
  7.    <el-form-item>
  8.      <el-select v-model="searchObj.level" clearable placeholder="讲师头衔">
  9.        <el-option :value="1" label="高级讲师"/>
  10.        <el-option :value="2" label="首席讲师"/>
  11.      </el-select>
  12.    </el-form-item>
  14.    <el-form-item label="添加时间">
  15.      <el-date-picker
  16.        v-model="searchObj.begin"
  17.        type="datetime"
  18.        placeholder="选择开始时间"
  19.        value-format="yyyy-MM-dd HH:mm:ss"
  20.        default-time="00:00:00"
  21.      />
  22.    </el-form-item>
  23.    <el-form-item>
  24.      <el-date-picker
  25.        v-model="searchObj.end"
  26.        type="datetime"
  27.        placeholder="选择截止时间"
  28.        value-format="yyyy-MM-dd HH:mm:ss"
  29.        default-time="00:00:00"
  30.      />
  31.    </el-form-item>
  33.    <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
  34.    <el-button type="default" @click="resetData()">清空</el-button>
  35.     </el-form>

清空方法

  1. resetData() {
  2.     this.searchObj = {}
  3.     this.fetchData()
  4. }

8、测试

二、删除

1、定义api

src/api/edu/teacher.js

  1. removeById(teacherId) {
  2.   return request({
  3.       url: `${api_name}/${teacherId}`,
  4.       method: 'delete'
  5.   })
  6. }

2、定义methods

src/views/edu/teacher/list.vue
使用MessageBox 弹框组件

  1. removeDataById(id) {
  2.    // debugger
  3.    // console.log(memberId)
  4.    this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
  5.        confirmButtonText: '确定',
  6.        cancelButtonText: '取消',
  7.        type: 'warning'
  8.    }).then(() => {
  9.        return teacher.removeById(id)
  10.    }).then(() => {
  11.        this.fetchData()
  12.        this.$message({
  13.            type: 'success',
  14.            message: '删除成功!'
  15.        })
  16.    }).catch((response) => { // 失败
  17.        if (response === 'cancel') {
  18.            this.$message({
  19.                type: 'info',
  20.                message: '已取消删除'
  21.            })
  22.        } else {
  23.            this.$message({
  24.                type: 'error',
  25.                message: '删除失败'
  26.            })
  27.        }
  28.    })
  29. }