3.vue列表加载数据的方式，配合分页操作

• 方法一： 分页配置选项： onChange: this.loadData

pagination: {
            total: 10,
            onChange: this.loadData,
            // 分页展示每页显示多少条数组
            pageSizes: [3, 5, 7],
            pageSize: 3,
},
mounted() {
      // 加载指标详情数据
      this.loadData(1, 5);
    },

methods: {
      // 展示指标数据
      // offset表示当前页，
      loadData(offset, size) {
        setTimeout(() => {
          const arrData = [{
              tableId: 1,
              name: '指标1',
              time: '2021/11/18 13:11:12',
              cal: '月',
              dimension: '岗位',
              set: '设置',
            }];
          this.tableConfig.tableData = arrData.slice((offset - 1) * size, offset * size);
        }, 500);
      },
}

• 方法二： 通过 :data 切割数据，从而进行分页展示

<el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 10]"
        :page-size="pageSize"
        background
        layout="total,slot,prev, pager, next,slot,sizes,jumper"
        :total="indicatorsTable.length"
        :data="数据表格选项.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      >
        <el-button @click="toFirstPage"></el-button>            
        <el-button @click="toLastPage"></el-button>
</el-pagination>

• 方法三： 每次分页重新加载数据并显示

// 分页组件设置  :current-page  @current-change
<el-pagination
        background
        layout="prev, pager, next"
        :total="totalCount"
        :disabled="isLoading"
        :current-page="filterParams.currentPage"
        @current-change="handleCurrentChange"
/>
created () {
    // 加载课程
    this.loadCourses()
  },
methods： {
    // 加载课程
    async loadCourses () {
      this.isLoading = true
      const { data } = await getQueryCourses(this.filterParams)
      if (data.code === '000000') {
        data.data.records.forEach(item => {
          // 用于表示更改的状态
          item.isStatusLoading = false
        })
        // 保存课程信息
        this.courses = data.data.records
        this.totalCount = data.data.total
        this.isLoading = false
      }
    },
    // 分页页码点击操作
    handleCurrentChange (page) {
      this.filterParams.currentPage = page
      this.loadCourses()
    },
    // 筛选操作
    handleFilter () {
      this.filterParams.currentPage = 1
      this.loadCourses()
    },
    // 重置操作
    handleReset () {
      this.$refs.form.resetFields()
      this.filterParams.currentPage = 1
      this.loadCourses()
    }
}