Vue - Post类型接口步骤

本篇文章是关于Post类型接口怎么接。全篇基于Vue-element-admin框架。
关于Get类型详见上一篇文章：
https://www.jianshu.com/p/b7343ef0090b
以表格el-table的数据导入为例。先看效果：

HTML

1、在user.js目录下写一个请求方法 "getPage"

url同样是由接口文档给出

Post接口文档示例.jpg

// 床位信息分页查询接口
export function getPage_5(data) {
  return request({
    url: '/admin/sysDept/getPage',
    method: 'post',
    data
  })
}

因为是Post类型接口所以getPage_6(data)要传入参数，具体需要对应接口文档中的内容，这里我选择把全部参数传过来。

2、在需要接接口的页面×××.vue下面引入该方法

import { getPage_5 } from '@/api/user'

3、在data的retrun中定义一个list接收数据

data() {
    return {
      tableKey: 0,
      list: null,//定义一个list
      total: 0,
      listLoading: true,
      listQuery: {
        pageIndex: 1,//页码
        pageSize: 10,//控制每页条数
        title: undefined,
        type: undefined,
        sort: '+id'
      }
   }
}

4、在methods中写一个getList()方法获取数据

 getList() {
      this.listLoading = false
      getPage_5(this.listQuery).then(response => {
        this.list = response.data.list//将读取到的数据存入事先定义的list中
        this.total = response.data.count//读取记录总条数
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    }

5、在el-table中绑定该数据

<!-- 表格 -->
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"//重点
      border
      :height="tableHeight"
      fit
      highlight-current-row
      stripe
      style="width: 100%;"
      :header-cell-style="{background:'#F0F5F7'}"
      @sort-change="sortChange"
    >
      <el-table-column label="科室编码" prop="code" align="center" width="130px" />
      <el-table-column label="科室名称" prop="name" align="center" width="130px" />
      <el-table-column label="大科室名称" prop="bigDept" align="center" width="130px" />
      <el-table-column label="科室类别" prop="type" align="center" width="130px" />
      <el-table-column label="内外科标志" prop="symbol" align="center" width="130px" />
      <el-table-column label="位置" prop="postion" align="center" class-name="status-col" width="130" />
      <el-table-column label="科室介绍" prop="intro" align="center" min-width="300" class-name="small-padding fixed-width" />
    </el-table>
<!-- 记录条数 分页-->
    <pagination
      :total="total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

:data="list"
将每一项的prop值对应接口文档中相应的变量值

6、总结重点

• 请求方法
• 引入请求方法
• 定义接收变量
• 写方法调用接口
• 修改el-table中对应的:data绑定值和prop对应变量名。
  其他关于复杂的表格详见官方文档
  表格：https://element.eleme.cn/#/zh-CN/component/table
  分页：https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/pagination.html