Vue | 利用slice()方法实现分页器

1-1. 拿到要分页的表格数据过后，获取到表格数据的长度，将表格数据的长度设置 为分页器里面的总条目数

this.total = this.pdDataList.length;

1-2. 让后在 分页器里面的 total 属性上进行绑定

1-3. 在 Vue 中的 data 里面设置 当前页和 当前条数: 即(currentPage 和 pagesize)

在这里插入代码片

1-4. element-ui 中分页器为我们提供了两个事件:

   size-change : 每页条数 改变时触发
   current-change ：当前页 改变时触发

1-5. 在 size-change 事件里面 将 data 中定义的 pagesize 的值进行改变

   handleSizeChange(pageSize){
   // pageSize 是当前选中的条数
    this.pagesize = pageSize;   
   },

1-6. 在 current-change 事件里面将 data 中定义的 currentPage 的值进行改变

   // 当前页改变时触发
handleCurrentChange(pageNum){
    // pageNum 是当前点击的页码
    this.currentPage = pageNum;     
}

1-7. 然后在 表格数据绑定的时候利用 数组的 slice() 方法进行分页

  :data="pdDataList.slice((currentPage-1)*pagesize,currentPage*pagesize)" 

1-8. 源码

<template>
  <div class="app-container">
    <div class="dashboard-text">{{ hostosList }}</div>
    <div class="dashboard-text"> {{ hostosList.results }}</div>
    <!--：data进行list数据分片-->
    <el-table
      :data="hostosList.results.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      style="width: 100%"
      size="small"
      border
      fit
      highlight-current-row
      :default-sort="{prop: 'id'}"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        prop="id"
        label="id"
        width="180"
        align="center"
      />
      <el-table-column
        prop="name"
        label="主机名"
        align="center"
      />
      <el-table-column
        prop="ip"
        label="IP"
        align="center"
      />
      <el-table-column
        prop="cpu"
        label="CPU使用率"
        sortable
        align="center"
      />
      <el-table-column
        prop="memory"
        label="内存使用率"
        sortable
        align="center"
      />
    </el-table>
    <!--分页区域-->
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[5,10,20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="hostosList.count"
      @size-change="size_change"
      @current-change="current_change"
    />
  </div>
</template>

<script>
import { getHostList } from '@/api/hostos'

export default {
  name: 'Hostos',
  data() {
    return {
      // 设置分页属性
      total: 0, // 总条目数
      pagesize: 5, // 每页显示条目个数
      currentPage: 1, // 当前页数
      // 数组
      hostosList: [],
      // 数据格式
      hostosForm: {
        id: '',
        name: '',
        ip: '',
        cpu: '',
        memory: ''
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取list数组
    getData() {
      getHostList().then(res => {
        this.hostosList = res.data
        this.total = res.data.count
        console.log('getData() ' + res.data.count)
      })
    },
    // row 行 ，row.cpu是行中的cpu，rowIndex行索引
    tableRowClassName({ row, column, rowIndex, columnIndex }) {
      if (row.cpu > 80) {
        return 'warning-row'
      } else if (row.memory > 80) {
        return 'danger-row'
      }
      return ''
    },
    // 监听 pagesize 改变的事件
    size_change(newSize) {
      this.pagesize = newSize
      console.log('size_change ' + newSize)
    },
    // 监听 页码值 改变的事件
    current_change(newPage) {
      this.currentPage = newPage
      console.log('current_change ' + newPage)
    }
  }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .danger-row {
    background: #F56C6C;
  }
</style>