vue3 请求数据

1. api文件夹下创建相应功能.js

import request from '@/utils/request'

/**
 * 获取设备列表数据
 *
 */
export const getTenantDevices = (data) => {
  return request({
    url: '/tenant/deviceInfos',
    method: 'GET',
    params: data
  })
}

2. 在对应页面创建请求数据的方法（异步加载）

import { ref } from 'vue'
import { getTenantDevices } from '@/api/device-manage'

// 数据相关 ?sortProperty=createdTime&sortOrder=DESC&pageSize=10&page=0
const tableData = ref([])
const total = ref(0)
const sortProperty = ref('createdTime')
const sortOrder = ref('DESC')
const pageSize = ref(2)
const page = ref(1)

// 获取数据的方法
const getListData = async () => {
  const result = await getTenantDevices({
    sortProperty: sortProperty.value,
    sortOrder: sortOrder.value,
    pageSize: pageSize.value,
    page: page.value - 1
  })
  tableData.value = result.data
  total.value = result.totalElements
  console.log(result)
}

// 执行方法
getListData()

3. table表单循环获取数据

<template>
  <div class="device-manage-container">
    <!-- table -->
    <el-card class="">
      <el-table :data="tableData" border style="width: 100%">
        <!-- 索引 -->
        <el-table-column label="#" type="index"></el-table-column>
        <!-- 名称 -->
        <el-table-column prop="name" label="名称"></el-table-column>
        <!-- 添加时间 -->
        <el-table-column label="添加时间">
          <template #default="{ row }">
            {{ $filters.dateFilter(row.createdTime) }}
          </template>
        </el-table-column>
        <!-- 设备id -->
        <el-table-column prop="id.id" label="设备ID"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" fixed="right" width="200">
          <template #default>
            <!-- 遥测数据按钮 -->
            <el-button type="primary" size="mini">最新遥测数据</el-button>
            <!-- 告警信息按钮 -->
            <el-button type="info" size="mini">告警信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="pageSize"
        :page-sizes="[2, 5, 10, 20]"
        layout="total, sizes, prev, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>