day05---(04)讲师列表（分页和条件查询)

1、登录饿了么网站查看框架组件

https://element.faas.ele.me/#/zh-CN

2、分页查询

（1）添加页面元素

<!-- 分页 -->
    <el-pagination
      :current-page="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getTeacherList"
    />

（2）修改js文件

<script>
import teacher from '@/api/teacher'
export default {
     
  data() {
     
    return {
     
      current: 1, // 当前页
      limit: 10, // 每页行数
      teacherQuery: {
     }, // 查询条件
      list: [], // 列表数据
      total: 0 // 共多少行数据
    }
  },
  created() {
     
    this.getTeacherList()
  },
  methods: {
     
    getTeacherList(current = 1) {
     
      this.current = current
      teacher
        .getTeacherPageVo(this.current, this.limit, this.teacherQuery)
        .then(response => {
     
          this.list = response.data.items
          this.total = response.data.total

          console.log(this.list)
          console.log(this.total)
        })
    }
</script>

2、条件查询

（1）添加页面元素

<!--查询表单-->
    <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="getTeacherList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

（2）修改js文件

<script>
import teacher from '@/api/teacher'
export default {
     
  data() {
     
    return {
     
      current: 1, // 当前页
      limit: 10, // 每页行数
      teacherQuery: {
     }, // 查询条件
      list: [], // 列表数据
      total: 0 // 共多少行数据
    }
  },
  created() {
     
    this.getTeacherList()
  },
  methods: {
     
    getTeacherList(current = 1) {
     
      this.current = current
      teacher
        .getTeacherPageVo(this.current, this.limit, this.teacherQuery)
        .then(response => {
     
          this.list = response.data.items
          this.total = response.data.total

          console.log(this.list)
          console.log(this.total)
        })
    },
    // 清空查询条件
    resetData() {
     
      // 清空查询条件
      this.teacherQuery = {
     }
      // 刷新表格
      this.getTeacherList()
    }
</script>