获取表数据--前后端接口对接-vue

后端swagger：

template中：

<div class="approvalForm">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ background: '#F7F7F7', textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column type="index" label="序号" width="200px">
          </el-table-column>
          <el-table-column
            v-for="(item, index) in headArr"
            :key="index"
            :prop="item.prop"
            :label="item.label"
          >
          </el-table-column>
          <el-table-column prop="operate" label="操作">
            </el-table-column
          >
        </el-table>
      </div>

 表头数据从headArr中获取：

其中prop的英文名称须于后端接口-调试里的名称相对应。

 data() {
    return {
      headArr: [
        { prop: "name", label: "数据名称" },
        { prop: "reason", label: "申请理由" },
        { prop: "submitTime", label: "提交时间" },
        { prop: "person", label: "申请人" },
        { prop: "state", label: "审批状态" }
      ]
    };

接下来是表格信息的获取，首先在写接口的api文件中写入读取表数据的接口：

使用get方式获取，根据后端所给，是通过链接拼接的形式，这里将url写成拼接形式，使用$和{}。

//审批请示--查询表内容（分页）
export function selectPage(param) {
    return request({
        url: `/xxxx-xxx/xxx/xxxx/${param.current}/${param.size}`,
        method: "get"
    });
}

在vue文件中，首先引入api文件中写的接口

import { selectPage } from "@/api/cimApi/userApi";

将传递的两个参数设置为1，在data-return中

 current: 1,
 size: 1,

调用接口：

 mounted() {
    this.approvalFormData();
  },

//审批请示表格数据获取
    approvalFormData() {
      let param = {
        current: this.current,
        size: this.size
      };
      selectPage(param).then(res => {
        if (res.data.data) {
          this.tableData = res.data.data;
        }
      });
    }

 出现了一个小问题，后台给的时间不是我们常看到的时间

故截取年月日作为我们前端页面的显示

//审批请示表格数据获取
    approvalFormData() {
      let param = {
        current: this.current,
        size: this.size
      };
      selectPage(param).then(res => {
        if (res.data.data) {
          this.tableData = res.data.data;
            //将后台传来的时间截取为年-月-日的形式
            this.tableData.forEach(item => {
              item.submitTime = item.submitTime.slice(0, 10);
            });
        }
      });
    }

修改后，成功获取后端传来的表格数据：