Vue-element-admin 学习之路

Vue - Post类型接口步骤

2019-12-06  本文已影响0人  璃小灯吖

本篇文章是关于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、总结重点

上一篇 下一篇

猜你喜欢

热点阅读