koa 实现表格分页

1. 效果展示

表格

⬇️返回数据⬇️

2. 代码实现

vue-script

<script setup>
import { ref, reactive, computed } from "vue";
const baseUrl = import.meta.env.DEV
  ? "http://localhost:13000"
  : "https://zichin.com/blogapi";

const params = reactive({
  page: 1,
  size: 10,
});

const paramsStr = computed(() => {
  return Object.keys(params)
    .map((key) => `${key}=${params[key]}`)
    .join("&");
});

const resultData = ref({});

const tableData = computed(() => {
  return resultData.value.data || [];
});

const doSearch = async () => {
  const result = await fetch(`${baseUrl}/pageviews?${paramsStr.value}`).then(
    (res) => res.json()
  );
  result.data = result.data.map((o) => {
    return {
      id: o.id,
      ip: o.ip,
      url: o.url,
      title: o.pageTitle,
      device: o.deviceType,
      location: o.location,
    };
  });
  resultData.value = result;
};

const pageChange = (page, size) => {
  params.page = page;
  params.size = size;
  doSearch();
};
</script>

vue-template

<template>
  <div class="loginform-container">
    <h3>表格</h3>
    <el-button type="primary" @click="doSearch()">获取数据</el-button>
    <p>⬇️返回数据⬇️</p>
    <!-- <p>{{ resultData }}</p> -->
    <el-table :data="tableData" stripe border show-overflow-tooltip>
      <el-table-column prop="title" label="title" width="180" />
      <el-table-column prop="location" label="location" width="180" />
      <el-table-column prop="url" label="url" />
      <el-table-column prop="ip" label="ip" />
      <el-table-column prop="device" label="device" />
      <el-table-column prop="id" label="id" sortable />
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="resultData.total"
      @change="pageChange"
    />
  </div>
</template>

vue-style

<style lang="scss">
.loginform-container {
  h3 {
    margin-bottom: 20px;
  }
}
</style>

3. 参考

• element-plus 表格 Table 表格

• element-plus 表格分页 Pagination 分页