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'
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>