vue3使用axios异步请求post分页数据_vue3 axios.post

vue3使用axios异步请求post分页数据

---

---

前言

Vue从入门到精通学习笔记

---

一、创建Vue模板

      <n-data-table
          remote
          ref="table"
          :columns="columns"
          :data="data"
          :loading="loading"
          :pagination="pagination"
          :row-key="rowKey"
          @update:page="handlePageChange"
      />
1
2
3
4
5
6
7
8
9
10

二、使用axios请求数据

function query (page, pageSize = 10 ,apiName ="",apiFlag ="",apiStatus="",apiPath="") {
  return new Promise((resolve) => {
    const url ='/interface/getList'
    const params = {
      "pageNum": page,
      "pageSize": pageSize,
      "apiName": apiName,
      "apiFlag": apiFlag,
      "apiStatus": apiStatus,
      "apiPath": apiPath,
      "order": "api_create_time",
      "sort": "desc"
    }

    axios.post(url,params)
        .then(function (response) {
          console.log(response);
          TableData.apiList=response.data.data;
          TableData.totalNum=response.data.totalNum;
          console.log(TableData.apiList);
          console.log(TableData.totalNum);
          const copiedData = TableData.apiList.map((v) => v)
          const total = TableData.totalNum
          const pageCount = Math.ceil(total / pageSize)

          setTimeout(
              () =>
                  resolve({
                    pageCount,
                    data: copiedData,
                    total
                  }),
              1500
          )
        })
        .catch(function (error) {
          console.log(error);
        });

  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

---

总结

默认请求的pageSize为10条，通过返回数据的total确定页数，再次查询时动态改变pageNum,以及其他参数。