AntDesign-Vue Table 查询与分页

前言

之前的增删改查小 Demo 已经快要进行到最后一步了，这节的任务是将请求数据的方式改为 分页，并且增加 分页条件查询 的功能。

页面布局

<a-table
    :data-source="dataSource"
    :columns="columns"
    :pagination="pagination"
>
<!-- ↑ pagination 是分页功能，传入一个对象 -->
  <!-- ↓ 为 a-table 组件添加个表头，里面有一个输入框和一个按钮 -->
  <template #title>
    <div>
      <div>
        <!-- 为输入框绑定事件 -->
        <a-input :bordered="false" placeholder="请输入水果名称" @keydown.enter="fnc_search" id="search">
        </a-input>
        <!-- 为按钮绑定事件 -->
        <a-button @click="fnc_search">
          <!-- ↓ 一个放大镜按钮 -->
          <SearchOutlined></SearchOutlined>
        </a-button>
      </div>
      <!-- 在表格中添加数据的按钮，和这篇文章没关系 -->
      <a-button @click="showAddModal">添加</a-button>
    </div>
  </template>
  <!-- ↓ 显示图片的 template -->
  <template v-slot:bodyCell="{ column, record, index}">
    <template v-if="column.dataIndex === 'pic'">
      <img :src="record.avatar" @click="checkInfo(record, index)"/>
    </template>
  </template>
</a-table>

逻辑部分

const keywords = ref("");
// ↑ 用以储存查询关键词的变量
// ↓ 分页对象
const pagination = reactive({
  defaultPageSize: 8, // 默认每页显示多少个
  defaultCurrent: 1,
  total: 0,
  current: 1,
  onChange: (current: number, size: number) => {
    console.log("改变了页数");
    console.log("current: ", current);
    console.log("size: ", size);
    pagination.current = current;
    getFruitsRequest(keywords.value, current, dataSource, pagination);
    // getFruitsRequest 函数在 api.js 这个文件里，下面会提到
  }
})

// 在挂载页面时请求数据，此时 keywords 为空字符串
onMounted(() => {
  getFruitsRequest(keywords.value, 1, dataSource, pagination);
})

// ↓ 表格列数据
const columns = [
  {
    title: '水果名称',
    dataIndex: 'fruitName',
    key: 'fruitName',
  },
  {
    title: '图片',
    dataIndex: 'pic',
    key: 'pic',
  },
  {
    title: '价格 （元/公斤）',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '库存（公斤）',
    dataIndex: 'stock',
    key: 'stock',
  },
];

/**
 * 点击搜索按钮的回调
 */
function fnc_search() {
  // 输入框 id 为 search
  // 这里通过 js 拿到 a-input 内的数据
  // 如果使用 v-model 方式的话会在输入框内数据发生改变时就改变 keyword 的值
  // 导致在输入框中有内容时，没有点击搜索按钮而直接点击翻页按钮也会触发关键词搜索
  if ((document.getElementById("search") as any).value === "") {
    // ↓ 如果值为空则将 keywords 置空
    keywords.value =  "";
  } else {
    // ↓ 前面加一个 '/' 为了拼接 api 接口
    // 例如：
    // http://www.xx00.com/fruits/1/5
    // ↑ 请求分页，第一页，请求五条数据
    // http://www.xx00.com/fruits/apple/2/3
    // ↑ 请求分页，关键词：apple，第二页，请求三条数据
    keywords.value = '/' + (document.getElementById("search") as any).value;
  }
  getFruitsRequest(keywords.value, 1, dataSource, pagination);
  // ↓ 点击搜索后，将当前页数置为1
  pagination.current = 1;
}

// api.ts
import axios from "axios";

const fruitApi = axios.create({
    // 设置超出响应时间
    timeout: 5000
})

/**
 * 分页查询
 */
export function getFruitsRequest(keywords = "", currentPage: number, dataSource: any, pagination: any) {
    fruitApi({
        method: 'get',
        url: 'api/fruits' + keywords + '/' + currentPage + '/8'
        // 默认请求 8 条数据
    })
        .then((resp) => {
            console.log(resp.data);
            // ↓ 分页查询需要 .records
            dataSource.value = resp.data.records;
            // ↑ 查询完成后替换数据源
            pagination.total = resp.data.total;
            // ↑ 改变数据总数
        })
        .catch((e) => {
            console.log("e: ", e);
        })
}

测试